0

次の ember の例では、foundationcss を使用してアコーディオンを表示します。私は、残り火コレクション ビューを使用してアコーディオンを実装し、コンテンツ バインディングを使用してデータを渡します。

コレクション ビューでレンダリングされる各アイテムのフィクスチャから NAME と DESC を表示するにはどうすればよいですか?

私の問題を理解するには、私の jsFiddle を使用してください: http://jsfiddle.net/theremin/6hLbC/

テンプレート

<script>
  $(document).foundation();
</script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Example</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    {{view App.AccordionView contentBinding="content"}}
</script>

JS

App = Ember.Application.create({});

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

App.Router.map( function() {

});

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

App.AccordionController = Ember.ArrayController.extend({

});

App.AccordionView = Ember.CollectionView.extend({
    tagName : "div",
    classNames : ["section-container", "accordion"],
    attributeBindings : ["data-section"],
    "data-section" : "accordion",
    itemViewClass     : Ember.ContainerView.extend({
        tagName : "section",
        childViews          : ["titleView", "contentView"],
        titleView    : Ember.View.extend({
            tagName   : "div",
            classNames : ["title"],
            template  : Ember.Handlebars.compile('<p><a href="#">Name:{{name}}{{content}}</a></p>')
        }),
        contentView  : Ember.View.extend({
            tagName   : "div data-section-content",
            classNames : ["content"],
            template  : Ember.Handlebars.compile('<p>desc:{{desc}}</p>')
        }),
    }),
})



App.Device = DS.Model.extend({
    name : DS.attr('string'),
    desc : DS.attr('string')
});
App.Device.FIXTURES = [{
    id : 1,
    name: "Plug1",
    desc: "Some words about plug1"
},
{
    id : 2,
    name: "Plug2",
    desc: "Some comments about plug2"    
}
];
4

1 に答える 1

1

動作中のバージョンはhttp://jsfiddle.net/6hLbC/1/です。

基本的に、Ember はカスタム ContainerView を作成するときにコンテキストを自動的に継承しないため、具体的に定義する必要があります。

itemViewClass     : Ember.ContainerView.extend({
    tagName : "section",
    childViews          : ["titleView", "contentView"],
    titleView    : Ember.View.extend({
        tagName   : "div",
        classNames : ["title"],
        contextBinding: "parentView.content",
        template  : Ember.Handlebars.compile('<p><a href="#">Name:{{name}}{{content}}</a></p>')
    }),
    contentView  : Ember.View.extend({
        tagName   : "div data-section-content",
        classNames : ["content"],
        contextBinding: "parentView.content",
        template  : Ember.Handlebars.compile('<p>desc:{{desc}}</p>')
    }),
}),
于 2013-04-13T03:54:08.070 に答える