排序后骨干集合不刷新答案

【问题标题】：Backbone collection not refreshing after sorting排序后骨干集合不刷新
【发布时间】：2014-04-27 20:15:36
【问题描述】：

我正在修改https://github.com/davidsulc/marionette-gentle-introduction，为表格添加排序可能性。看起来我已经完成了需要让它工作的事情，但是表格没有被刷新。

Entities.DeviceCollection = Backbone.Collection.extend({
    url: "/devices",
    model: Entities.Device,
    sortAttribute: "type",
    sortDirection: 1,
    sortDevices: function(attr) {
        this.sortAttribute = attr;
        this.sort();
    },
    comparator: function(a, b) {
        var a = a.get(this.sortAttribute),
                b = b.get(this.sortAttribute);

        if (a == b)
            return 0;

        if (this.sortDirection == 1) {
            return a > b ? 1 : -1;
        } else {
            return a < b ? 1 : -1;
        }
    }
});

2) 视图：original view code

View.Devices = Marionette.CompositeView.extend({
    tagName: "table",
    className: "table table-hover",
    template: listTpl,
    emptyView: NoDevicesView,
    itemView: View.Device,
    itemViewContainer: "tbody",
    sortUpIcon: 'glyphicon glyphicon-chevron-up',
    sortDnIcon: 'glyphicon glyphicon-chevron-down',
    events: {
        "click th": "headerClick"
    },
    initialize: function() {
        this.listenTo(this.collection, "sort reset", function() {
            console.log("Sort RESET");
            this.appendHtml = function(collectionView, itemView, index) {
                collectionView.$el.append(itemView.el);
            }
        });
    },
    onRender: function() {
        this.$el.find('th div')
                .append($('<span>'))
                .closest('thead')
                .find('span')
                .addClass('sort-ic icon-none')
                .end()
                .find('[column="' + this.collection.sortAttribute + '"] span')
                .removeClass('icon-none').addClass(this.sortUpIcon);
    },
    onCompositeCollectionRendered: function() {
        this.appendHtml = function(collectionView, itemView, index) {
            collectionView.$el.prepend(itemView.el);
        }
    },
    headerClick: function(e) {
        var $el = $(e.currentTarget),
                ns = $el.attr('column'),
                cs = this.collection.sortAttribute;
        console.log('ns:' + ns);

        // Toggle sort if the current column is sorted
        if (ns == cs) {
            this.collection.sortDirection *= -1;
        } else {
            this.collection.sortDirection = 1;
        }

        // Adjust the indicators.  Reset everything to hide the indicator
        $el.closest('thead').find('span').attr('class', 'icon-none');

        // Now show the correct icon on the correct column
        if (this.collection.sortDirection == 1) {
            $el.find('span').removeClass('icon-none').addClass(this.sortUpIcon);
        } else {
            $el.find('span').removeClass('icon-none').addClass(this.sortDnIcon);
        }

        // Now sort the collection
        this.collection.sortDevices(ns);
    }
});

这里我添加了监听器来排序刷新视图，但是不起作用

initialize: function () {
this.listenTo(this.collection, "sort reset", function() {
    console.log("Sort RESET");
    this.appendHtml = function(collectionView, itemView, index) {
        collectionView.$el.append(itemView.el);
    }
});
},

问题可能出在哪里？

【问题讨论】：

sortDevices 的代码是什么？它会触发sort 或reset（例如this.trigger('sort')）吗？
sortDevices 看起来像这样： sortDevices: function(attr) { this.sortAttribute = attr; this.sort(); }, this.sort(); - 触发排序事件
你能把sort的代码贴出来吗？
sort() - 是骨干网的内置功能backbonejs.org/#Collection-sort

标签： javascript backbone.js marionette

【解决方案1】：

只是 user2814599 另一个答案的简短版本：

View.Devices = Marionette.CompositeView.extend({
    // Omitted other attributes
    collectionEvents: {
        'sort': 'render'
    }
});

见：https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#viewmodelevents-and-viewcollectionevents

【讨论】：

【解决方案2】：

我所要做的就是在视图的初始化方法中添加一个侦听器，以便在每个排序事件上调用 this.render()，如下所示：

        initialize: function () {
            this.listenTo(this.collection, "sort", function () {
                this.render();

            });
        },

【讨论】：