javascript - EmberJS-在 Handlebars 模板内添加动态数据属性

Question

我有一个 Handlebars 模板、一个关联的 View 和一个相关的 Controller 。该模板只是循环遍历对象数组并渲染 div 列表。我需要为每个 div 添加一个 data-project-id 属性(id 是模型中对象的属性)。

<script type="text/x-handlebars" data-template-name="projects">
    {{#each project in model}}
        <div data-project-id={{project.Id}}>
            // Do something
        </div>
    {{/each}}
</script>

App.ProjectsView = Ember.View.extend({
    templateName: 'projects',
    attributeBindings: ['data-project-id'],
    'data-project-id': function() {
        return this.content.Id;
     }.property('content.id')
} 

但是， View 内的“内容”当前未定义。添加此动态属性的最佳方法是什么？

Answer 1

您可以使用bind-attr将数据属性绑定(bind)到模型属性:

{{#each project in model}}
    <div {{bind-attr data-projet-id='project.Id'}}>
        // Do something
    </div>
{{/each}}

http://emberjs.com/guides/templates/binding-element-attributes/