1

我在 ember-router-example 之后尝试了这个非常基本的 ember 路由器示例。但是当我运行它时,它会显示一个空白页面。我检查了控制台窗口是否有任何错误,但似乎没问题。不太确定为什么这不起作用以及在哪里丢失。

我只是想创建主页、部分、项目的第一级链接。

有人可以帮助我吗?

index.html

    <body>
    <script src="js/libs/jquery-1.7.1.js"></script>
        <script src="js/libs/jquery.lorem.js"></script>
        <script src="js/libs/bootstrap.min.js"></script>
        <script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
        <script src="js/libs/ember.js"></script>
        <script src="js/app.js"></script>

           <script type="text/x-handlebars" data-template-name="application">

            <div>
                <ul>
                    <li><a {{action "doHome"}}>Home</a></li>
                    <li><a {{action "doSections"}}>Sections</a></li>
                    <li><a {{action "doItems"}}>Items</a></li>
                </ul>
            </div>

             <div>
            {{outlets}}
           </div>

           </script>


            <script type="text/x-handlebars" data-template-name="home">
            <h1>yeah right Home</h1>
           </script>

           <script type="text/x-handlebars" data-template-name="sections">
            <h1>Oh v in Sections index</h1>
           </script>


           <script type="text/x-handlebars" data-template-name="items">
            <h1>correct in Items Index Page</h1>
           </script>
    </body>

app.js

    $(function() {


    App = Ember.Application.create()


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


    App.HomeController = Ember.Controller.extend();
    App.HomeView = Ember.View.extend({
        templateName:'home'
    });

    App.SectionsController = Ember.Controller.extend();
    App.SectionsView = Ember.View.extend({
        templateName:'sections'
    });


    App.ItemsController = Ember.Controller.extend();
    App.ItemsView = Ember.View.extend({
        templateName:'items'
    });

    App.Route = Ember.Route.extend({
        root: Ember.Route.extend({
            doHome : function(router,event){
                router.transitionTo('home');
            },

            doSections:function(router,event){
                router.transitionTo('sections');
            },

            doitems:function(router,event){
                router.transitionTo('items');
            },

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

            sections : Ember.Route.extend({
                route : '/sections',
                connectOutlets:function(router,event){
                    router.get('applicationController').connectOutlet('sections');
                }
            }),

            items : Ember.Route.extend({
                route : '/items',
                connectOutlets:function(router,event){
                    router.get('applicationController').connectOutlet('items');
                }
        })

        })//root
}) //router

});
4

2 回答 2

2

我用你的代码创建了这个小提琴。它似乎正在工作,只需使用最新的ember车把。也许你应该改变{{outlets}}.{{outlet}}

编辑

上面的小提琴不起作用,请参阅更新的小提琴我使用新的路由 API
重写了路由代码,现在它按预期工作。

于 2013-02-10T21:19:29.487 回答
0

我相信当您在主 html 文件中定义模板时,您应该使用“模板”而不是 templateName。如果您要将这些模板创建为单独的把手文件并使用构建步骤,那么您将使用 templateName 来引用它们(按文件名)。

史蒂夫

于 2013-02-10T18:53:38.220 回答