2

我一直在尝试学习 Ember，通过在 SOF 上遵循其他示例，我编写了一个非常简单的路由示例。我有三个观点：

主页 火星 木星

我想要三个导航链接来调用/解析提到的视图。我不知道我做错了什么，我似乎根本无法得到任何输出。如果有人能指出错误，我将不胜感激。

这是小提琴：http: //jsfiddle.net/combustion007/PvCk8/

应用程序代码：

$(function()
{
    App = Em.Application.create({
        name: "superman",
        init: function(){
            alert("APP INIT");
        }
    })

    //  APPL
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({
        templateName: 'application'
    });

    //  NAVBAR
    App.NavbarController = Em.Controller.extend();
    App.NavbarView = Em.View.extende({
        templateName: 'navbar',
        classNames: ['']
    });

    //  HOME
    App.HomeController = Em.Controller.extend();
    App.HomeView = Em.View.extend({
        tempalteName: 'home',
        classNames: ['']
    });

    //  MARS
    App.MarsController = Em.Controller.extend();
    App.MarsView = Em.View.extend({
        templateName: 'mars',
        classNames: ['']
    });

    //  JUPITER
    App.JupiterContoller = Em.Controller.extend();
    App.JupiterView = Em.View.extend({
        templateName: 'jupiter',
        classNames: ['']
    });

    //ROUTER INIT
    App.Router = Em.Router.extend({
        enableLogging: true,
        location: 'hash',

        //  EVENTS
        root: Em.Route.extend({
            gotoHome: Ember.Route.transitionTo('home'),
            gotoMars: Ember.Route.transitionTo('mars'),
            gotoJupiter: Ember.Route.transitionTo('jupiter'),

        // STATES
            home: Em.Route.extend({
                route: '/',
                connectOutlets: function(router, context){
                    router.get('applicationController').connectOutlet('home');
                }
            }),

            mars: Em.Route.extend({
                route: '/',
                connectOutlets: function(router, context){
                    router.get('applicationController').connectOutlet('mars');
                }
            }),

            jupiter: Em.Route.extend({
                route: '/',
                connectOutlets: function(router, context){
                    router.get('applicationController').connectOutlet('jupiter');
                }
            }),         
        })
    });
    App.initialize();
})

HTML：

<script type="text/x-handlebars" data-template-name="application">
    {{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
    <br /><hr />
    <div class="content">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="navbar">
    <ul>
        <li><a href="#" {{action gotoHome}}>Home</a></li>
        <li><a href="#" {{action gotoMars}}>Mars</a></li>
        <li><a href="#" {{action gotoJupiter}}>Jupiter</a></li>
    </ul>
</script>


<script type="text/x-handlebars" data-template-name="home">
    <h2>Home</h2>
    <hr />
    <br /><br />          
</script>


<script type="text/x-handlebars" data-template-name="mars">
    <h2>Mars</h2>
    <hr />
    <br /><br />          
</script>

<script type="text/x-handlebars" data-template-name="jupiter">
    <h2>Jupiter</h2>
    <hr />
    <br /><br />          
</script>
4

2 回答 2

2

更改您的 jsfiddle http://jsfiddle.net/cteegarden/PvCk8/7/：

  • 添加了车把js库
  • 修复了 2 个拼写错误：extende更改为extend和tempaltNametemplateName
  • 更新mars和jupiter路线可在路线以外访问'/'
  • 删除了init方法App

{{outlet}}handlebars 模板中的应用程序处于状态application时默认填充主视图，应用程序处于'/'状态时填充火星视图，应用程序处于状态时填充'/mars'jupiter 视图'/jupiter'。您在navbar模板中拥有的 3 个链接以编程方式将状态更改为每个链接，从而将{{outlet}}其替换为正确的视图。

编辑

具有类似路由示例的两个资源

于 2012-12-17T21:41:48.997 回答
0

我浏览了你的 jsFiddle 并修复了一些让它工作的东西：http: //jsfiddle.net/arasbm/fLBty/3/

它仍然没有做你想做的事，因为有些事情你需要决定。该代码的主要问题是/在路由器中定义了三次。您只需要定义一次，然后连接该路由内的所有插座：

root: Em.Route.extend({

    whatever: Em.Route.extend({
        route: '/',
        connectOutlets: function(router, context){
            router.get('applicationController').connectOutlet('home_outlet', 'home');
            router.get('applicationController').connectOutlet('mars_outlet', 'mars');
            router.get('applicationController').connectOutlet('jupiter_outlet', 'jupiter');
        }
    })            
})

因为在这种情况下，在同一条路线中使用了多个出口，您需要命名出口：

<script type="text/x-handlebars" data-template-name="application">
    {{view App.NavbarView}}
    <br /><hr />
    {{outlet home_outlet}}
    {{outlet mars_outlet}}
    {{outlet jupiter_outlet}}
</script>

我只使用了 ember 几个月，所以我对它还没有很好的看法。我希望这能帮助你前进。

编辑：根据尚未发布的新路由器 API 的评论更新了答案。

如果您刚开始使用 ember，请查看tomdale 的路由器 API v2 指南，这是有关如何在 Ember 1.0 中定义路由器的最新信息。但正如评论中指出的那样，它还没有在主人身上。

于 2012-12-16T09:34:03.983 回答