1

これが私のJSコードです

var mainApp = new Backbone.Marionette.Application();

mainApp.addRegions({        
        mainRegion: "#main-region"
});

var UserModel = Backbone.Model.extend();

var UserView = Backbone.Marionette.ItemView.extend({
    tagName: 'div',
    className: 'user-item',
    template: '#user-item-tpl'
});

var UserCollection = Backbone.Collection.extend({
    model: UserModel,
    sortKey: 'id',
    comparator: function(item1, item2){
        item1 = item1.get(this.sortKey);
        item2 = item2.get(this.sortKey);
        return item1 > item2 ? 1 : (item1 < item2 ? -1 : 0);
    },
    sortByID: function(){
        this.sort();
    }
});

var UserListView = Backbone.Marionette.CompositeView.extend({
    className: 'user-view',
    tagName: 'div',
    itemView: UserView,
    itemViewContainer: '.user-list',
    events: {
        'click .btn' : 'doSort'
    },
    collection: new UserCollection([
        {id: 3, name: 'Peter'},
        {id: 1, name: 'Tom'},
        {id: 2, name: 'Mary'}
    ]),
    initialize: function(){

    },
    onShow: function(){

    },
    appendHtml: function(collectionView, itemView, index){
        $(this.itemViewContainer).append(itemView.el);
    },
    render: function(){
        this.template = _.template($('#user-view-tpl').html());
        this.$el.html(this.template());
        return this;
    },
    doSort: function(){
        this.collection.sortByID();
        this.collection.trigger('reset');
        console.log(this.collection.toJSON());
    }
});

mainApp.mainRegion.show(new UserListView());

ここにhtmlがあります

<div id="main-region"></div>

<script id="user-view-tpl" type="text/template">
    <div class="user-list"></div>
    <a class="btn">SORT</a>
</script>

<script id="user-item-tpl" type="text/template">
    <%= id %> | <%= name %>
</script>

「SORT」ボタンをクリックして doSort() 関数をトリガーするたびに、コレクションが適切にソートされていることがわかりますが、複合ビューは「残り」に反応せず、間違った順序で表示され続けます。

複合ビューを sort() に自動的に反応させるにはどうすればよいですか?

PS: 私のコードは見栄えが良いと思いますが、jsfiddle で実行でき、いくつかのガイドラインを得ることができます。ありがとう。

jsFiddle: http://jsfiddle.net/chitocheng/fad8U/

4

1 に答える 1

7

変更したコードの実例を次に示します: http://jsfiddle.net/AUZrY/1/

元のコードにはいくつかの問題がありました:

  • 複合ビューにはテンプレートがありませんでした (コレクション ビューに変更しました)
  • テンプレートがなかったので、appendHtml子ビューを添付する場所がありません
  • ビューを Marionette で自分でレンダリングする必要はありません。特に、html を置き換えます。
  • 同じ ID を持つ複数のモデルがありました
于 2013-06-13T18:40:47.727 に答える