Question

我一直在努力学习Ember，我在SOF上通过以下其他示例编写了一个非常简单的路由示例。我有三种观点：

主页火星木星

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

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

APP代码：

$(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>

Answer 1

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

添加了把手js库
修正了2个拼写错误：extende已更改为extend而tempaltName更改为templateName
更新了mars和jupiter路由，以便在'/'
删除了init

App

当应用程序处于{{outlet}}状态时，application手柄模板中的'/'默认填充主视图，当应用程序位于{{1时应用程序位于'/mars'时的jupiter视图。 '/jupiter'模板中的3个链接以编程方式将状态更改为每个链接，从而导致navbar被正确的视图替换。

修改

两个资源，包含类似路由的示例

Right way to do navigation with Ember

http://codebrief.com/2012/07/anatomy-of-an-ember-dot-js-app-part-i-redux-routing-and-outlets/

Answer 2

我浏览了你的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，请查看the router API v2 guide by tomdale，这是有关如何在Ember 1.0中定义路由器的最新信息。但正如评论中指出的那样，它还没有在主人身上。

简单的灰烬路由示例没有通过把手输出

2 个答案: