0

我试图在命名的网点中呈现一些内容，但没有成功。我尝试遵循如何在路由器 v2 中为路由渲染多个模板，但那里的解决方案对我不起作用！我的 html 页面看起来像：`

 <!DOCTYPE html>
  <head>
    <meta charset="utf-8" />

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
    <style>
        .main-container{
            width:800px;
            margin:0px auto;
        }
    </style>
</head>
<body>

<script type="text/x-handlebars" data-template-name="application">
    <div class="main-container">
        <div>{{outlet topMenu}}</div>
        <div>
             <div style="float:left; width:30%;">{{outlet sideMenu}}</div>
             <div style="float:left; width:70%;">{{outlet content}}</div>
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="menu">
    <ul>
        {{#each model}}
            <li>{{label}}</li>
        {{/each}}
    </ul>
</script>



<script src="../js/ember/libs/jquery-1.9.1.js"></script>
<script src="../js/ember/libs/handlebars-1.0.0-rc.4.js"></script>
<script src="../js/ember/libs/ember-1.0.0-rc.6.1.js"></script>
<script src="../js/ember/libs/ember-data-master.js"></script>
<script src="../js/ember/demo.js"></script>
</body>
</html>

目前我什至不想理会sideMenu和内容，我只想让顶部菜单显示出来。对应的js是：

window.App = Ember.Application.create();

// Router
App.Router.map(function() {
    this.resource('menu',{ path: "/" },function(){
        this.resource('sideMenu',{ path: "/:menu_id" },function(){
            this.resource('content',{path:'/content/:content_id'});
        });
    });
});

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('menu',{outlet:'topMenu',controller:this.controllerFor('menu', App.Menu.find())});
    }
});

App.MenuRoute = Ember.Route.extend({
    model:function(){
        return App.Menu.find();
    }
});

App.Store = DS.Store.extend({
    revision:12,
    adapter:'DS.FixtureAdapter'
    //adapter:DS.RESTAdapter.extend({
    //    url: 'http://....'
    //})
});



App.Menu = DS.Model.extend({
    label: DS.attr('string')
    ,subMenu: DS.hasMany('App.subMenu')
});

App.SubMenu = DS.Model.extend({
    label: DS.attr('string')
    ,content :DS.attr('string')
});


App.SubMenu.FIXTURES = [
    {
        id:1
        ,label:"Sub1"
        ,content:'Hello there 1'
    }
    ,{
        id:2
        ,label:"Sub2"
        ,content:'Hello there 2'
    },{
        id:3
        ,label:"Sub3"
        ,content:'Hello there 3'
    },{
        id:4
        ,label:"Sub4"
        ,content:'Hello there 4'
    }
];

App.Menu.FIXTURES = [
    {
        id:1,
        label:"Home",
        subMenu:[1,2]
    },
    {
        id:2,
        label:"Api",
        subMenu:[3,4]
    }
];`

我不确定我的路由器是否设置正确。任何反馈将不胜感激。

问候，迪

4

1 回答 1

0

我猜 ember 没有使用 IndexRoute。可能您想要的是使用 MenuInde​​x：

App.MenuIndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('menu',{outlet:'topMenu',controller:this.controllerFor('menu', App.Menu.find())});
  }
});

尝试打开日志记录，以便您可以看到 ember 正在使用哪些路由/控制器/视图/模板：

var App = Ember.Application.create({
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

http://blog.emberwatch.com/2013/06/13/logging-the-magic-in-ember-js.html

于 2013-08-17T02:01:22.677 回答