1

jQuery UIとの統合と emberjs.com のtodos の例の2 つの ebmer.js の例を組み合わせようとしています。並べ替え可能な todo リストが必要です。

ソート可能なものをシリアル化したいところまで、すべてがスムーズに進みました。そのためには、並べ替え可能な項目に属性を追加できる必要があります。これはテンプレートです：

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

Todos.TodosListViewjQuery UI の例のメニューに似た CollectionView です。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たが、ビューのコンテンツ (todo 自体) にアクセスできませんでした。

これは可能ですか？

ご協力いただきありがとうございます。


編集:
回避策を見つけました-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このプロパティを of のattributeBindings(ドキュメントはこちら) に追加できます。 http://jsfiddle.net/pangratz666/6X4QU/itemViewClassをTodos.TodosListView参照してください。

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 に答える