1

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

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

{{#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>

我需要能够做的是编辑<div>包装<input>. 假设 todo 的 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>

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

4

1 回答 1

3

您可以创建一个计算属性serial并将此属性添加到您的attributeBindings（此处记录）中itemViewClass，Todos.TodosListView请参阅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()
    })
});
于 2012-04-24T11:55:38.073 回答