Question

以下的ember示例使用foundationcss显示手风琴。我使用ember集合视图实现了accordion，并通过内容绑定将数据传递给它。

如何在集合视图中的每个项目渲染中显示Fixtures中的NAME和DESC？

请用我的jsFiddle来理解我的问题： http://jsfiddle.net/theremin/6hLbC/

TEMPLATES

<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"    
}
];

Answer 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>')
    }),
}),

如何显示传递到余烬收集视图中的模型内容

1 个答案: