EmberJS-在车把模板中添加动态数据属性答案

【问题标题】：EmberJS-Adding dynamic data-attributes inside handlebars templateEmberJS-在车把模板中添加动态数据属性
【发布时间】：2014-03-18 00:46:05
【问题描述】：

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

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

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

您可以使用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/

【讨论】：

哈哈，我什至没有尝试使用 bind-attr 帮助器，因为您在上面引用的同一页面说“默认情况下，视图帮助器不接受数据属性”。我的错。一些示例使用 templateName 属性引用 View 对象中的模板，而一些示例使用“View”帮助程序。这两个是一样的吗？我看到了几个示例，其中使用“内容”属性在视图中访问模型，但对我来说它返回未定义。
视图助手不接受数据绑定，但您应该可以绑定到 div，如我的示例代码所示。