0

名前付きアウトレットでいくつかのコンテンツをレンダリングしようとしましたが、成功しませんでした。Router 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