Ember.js - CollectionView，将属性添加到子视图的 div 包装器

Question

我正在尝试结合两个 ebmer.js 示例：与 jQuery UI 和 emberjs.com 中的待办事项示例集成。我想要一个可排序的待办事项列表。

一切都很顺利，直到我到了想要序列化可排序对象的地步。为此，我需要能够向可排序项目添加一个属性。这是模板：

{{#collection Todos.TodosListView}}
    {{#view Todos.TodoView contentBinding="content" checkedBinding="content.isDone"}}
        <label>{{content.title}}</label>
    {{/view}}
{{/collection}}

Todos.TodosListView是一个 CollectionView，类似于 jQuery UI 示例中的菜单。 Todos.TodoView是一个复选框。这将生成以下 html：

<div class="ember-view todo-list ui-sortable" id="ember267">
    <div class="ember-view" id="ember284">
        <input type="checkbox" class="ember-view ember-checkbox todo" id="ember297">
            <label>
            <script type="text/x-placeholder" id="metamorph-1-start"></script>
            something to do
            <script type="text/x-placeholder" id="metamorph-1-end"></script>
            </label>
    </div>
</div>

我需要能够做的是编辑包装<input>的<div>。假设待办事项的 id 为 1，我想添加 serial=todos_1 .我尝试将didInsertElement添加到TodoView并向父视图添加属性，但我无法访问视图的内容（待办事项本身）。

这可能吗？

感谢您的帮助。


编辑：
我找到了一个解决方法 - 将 ID 作为隐藏元素添加到 DOM 中。更新后的模板：

{{#collection Todos.TodosListView}}
    {{#view Todos.TodoView contentBinding="content" checkedBinding="content.isDone" serial="content.serial"}}
        <label>{{content.title}}</label>
        <span style="display: none;" class="todo-id">{{content.id}}</span>
    {{/view}}
{{/collection}}

Todos.TodoView.didInsertElement：

didInsertElement: function() {
    var $div = this.get('parentView').$();
    var id = $div.children('.todo-id').text();
    $div.attr('serial', 'todos_' + id);
}

生成的 html：

<div class="ember-view todo-list ui-sortable" id="ember267">
    <div class="ember-view" id="ember284" serial="todos_100">
        <input type="checkbox" class="ember-view ember-checkbox todo" id="ember297">
            <label>
                <script type="text/x-placeholder" id="metamorph-1-start"></script>
                something to do
                <script type="text/x-placeholder" id="metamorph-1-end"></script>
            </label>
            <span class="todo-id" style="display: none;">
                <script type="text/x-placeholder" id="metamorph-2-start"></script>
                100
                <script type="text/x-placeholder" id="metamorph-2-end"></script>
            </span>
    </div>
</div>

我仍然想知道是否有更优雅的方式来实现这一目标。

Answer 1

您可以创建一个计算属性serial并将此属性添加到Todos.TodosListView itemViewClass的attributeBindings（在此处记录），请参阅 http://jsfiddle.net/pangratz666/6X4QU/：

Todos.TodosListView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
        attributeBindings: ['serial'],
        serial: function() {
            return 'todos_' + Ember.getPath(this, 'content.id');
        }.property('content.id').cacheable()
    })
});