6

ビューのコードは

Ember.View.extend({
        template: Ember.Handlebars.compile(html), // html is in string
        content: function() {
            return [
            { Title: "Dashboard", ID: "dashboard" },
            { Title: "Invoices", ID: "invoices" },
            { Title: "Expenses", ID: "expenses" },
            { Title: "People", ID: "people" },
            { Title: "Reports", ID: "reports" },
            { Title: "Settings", ID: "settings" }
        ]},
        iconClass: function(link){
          return "icon icon-" + link.ID
        }
    });

テンプレート (上に「html」として表示) は次のようになります。

<ul>
    {{#each link in view.content}}
    <li>
        <a>
            <span class="icon" {{bindAttr class="view.iconClass(link)"}}></span>
            <span class="title">{{link.Title}}</span>
        </a>
    </li>
    {{/each}}
</ul>

これはレンダリングします

<span class="icon" data-bindattr-2="2"></span>

そのため、追加のクラス属性はレンダリングされません。スコープで何か間違っていますか？

ノート：

やりたいことを示すためにコードを変更しました。

4

3 に答える 3

6

編集

新しい質問によると、次を使用する必要がありますEmber.CollectionView。

App.FooCollectionView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
        iconClass: function() {
             return "icon-dashboard icon " + this.get('content.ID');
        }.property('content.ID')
    })
});

ご覧のとおり、それぞれに依存itemViewClassするプロパティがあります。iconClasscontent.id

ビューのテンプレートにコレクション ビューを追加する必要がありますFooView。

<ul>
    {{#collection App.FooCollectionView contentBinding="view.content"}}
    <li>
        <a>
            <span {{bindAttr class="view.iconClass"}}>foo</span>
            <span class="title">{{view.content.Title}}</span>
        </a>
    </li>
    {{/collection}}
</ul>

ここでは、{{collection}}Handlebars ヘルパーを使用して、 のコンテンツを にバインドしFooViewますFooCollectionView。

itemViewClassCollectionView.content 内の各オブジェクトのインスタンスを自動的に作成し、そのインスタンスを関連付けられたオブジェクトに設定して、それをビューに追加します。

Ember.CollectionViewのドキュメントを読むことをお勧めします。

そして、この JSFiddle でこのソリューションを試すことができます。

于 2012-10-12T09:04:24.530 に答える
2

これを行うもう1つの簡単な方法は、計算されたプロパティをモデルに追加することです。以下の例では、特殊なスタイルの属性が必要でした。

モデル - - 

App.Photo = Em.Object.extend(
  objectId: null
  url: ""
  style: (-> 
    "background-image:url('" + @get("url") + "')"
  ).property("url")
)

レンプレート - - -

{{#each item in App.photoController}}
<div {{bindAttr style="item.style"}}></div>
{{/each}}
于 2013-01-16T18:13:16.370 に答える