0

Ember を使い始めたばかりで、基本的な Web アプリの構造が整っています。部分的なテンプレートが設定されており、それにいくつかのテスト データを取り込みたいと考えています。「ホーム」テンプレートを使用するとテスト データを表示できますが、コレクションの部分テンプレートに取得できません。私がよく知らない基本的な Ember の概念に関連している必要があることはほぼ確実です。これが私の単純化された html で、以下が Ember js です。「ホーム」テンプレートから部分的な「コレクション」テンプレートに「各」ループを持ち込む方法を誰かが知っている場合は、非常に感謝します。

[code]
<script type="text/x-handlebars" ><!-- data-template-name="application" -->
    <div id="main">
        <ul>
            <li>
               <image src="logo.png" style="width:439px;height:102px;"/>
            </li>
            <li>{{#link-to 'home'}}Home{{/link-to}} | {{#link-to 'help'}}Help{{/link-to}}</li>
        </ul>
    </div>

    <div class="collections">
        {{partial 'collections'}}
    </div>

    <div class="statistics">
        {{outlet}}
    </div>        
    </script>

    <script type="text/x-handlebars" id="collections">
        COLLECTIONS<br/>
        <!-- here is where I wand the 'each' loop to go -->
    </script>

    <script type="text/x-handlebars" id="home">
        OnLoad : This is Home Page<br/>            
       <ul>
            {{#each}}
                <li>
                <label>{{title}}</label>
                </li>
            {{/each}}
        </ul>          
    </script>

    <script type="text/x-handlebars" id="help">
        Welcome to Help Page
    </script>
[/code]

上記の JS コードは次のとおりです。 [code] App = Ember.Application.create();

App.Router.map(function(){
    this.resource('home', { path: '/' });
    this.resource('help');    
}); 

App.CollectionsRoute = Ember.Route.extend({
    model: function(){
        return items;
    }
});

App.HomeRoute = Ember.Route.extend({
   model: function(){
       return items;
   }
});
var items = [
  {
   id: 1,
   title: 'Item 1',
   belongsTo: 'parent path 1'
  },{
   id: 2,
   title: 'Item 2',
   belongsTo: 'parent path 2'
  },{
   id: 3,
   title: 'Item 3',
   belongsTo: 'parent path 3'
  }
];

[/code]
4

1 に答える 1

0

partial 'collections'アプリケーション テンプレートのコンテキストが同じです。したがって、次のように宣言すると:

App.ApplicationRoute = Ember.Route.extend({
    model: function(){
        return items;
    }
});

使用できるようになります：

<script type="text/x-handlebars" id="collections">
    COLLECTIONS<br/>
    <ul>
        {{#each}}
            <li>
            <label>{{title}}</label>
            </li>
        {{/each}}
    </ul>
</script>
于 2013-11-04T18:38:32.740 に答える