EmberJS-在把手模板中添加动态数据属性

时间:2014-03-18 00:46:05

标签: javascript ember.js handlebars.js

我有一个把手模板,一个相关的视图和一个相关的控制器。模板只是遍历一个对象数组并呈现一个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')
} 

但是,视图中的“内容”目前尚未定义。添加此动态属性的最佳方法是什么?

1 个答案:

答案 0 :(得分:2)

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

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

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