Backbone.js修改comparator未实现排序反转的问题咨询

你遇到的问题核心是：集合已经按新的comparator完成排序，但视图没有同步更新DOM结构。

原示例的TodoList视图只监听了集合的add事件，每次新增待办项时直接把元素append到列表末尾，完全没处理集合排序后的DOM更新逻辑。而Backbone集合设置comparator后，新增模型时会自动完成内部排序，但不会主动帮你重新渲染视图——你需要手动监听集合的sort事件来触发视图更新。

具体修复步骤： #

1. 在TodoList视图的initialize方法中，添加对集合sort事件的监听，让集合排序时重新渲染整个列表：

initialize: function() {
  this.listenTo(this.collection, 'add', this.addOne);
  // 新增这一行
  this.listenTo(this.collection, 'sort', this.render);
}

2. 确保render方法会清空现有列表并重新渲染所有模型（原示例的render方法已经做了这件事：先this.$el.empty()，再遍历集合调用addOne），这样排序后的集合就能正确渲染到DOM中。

补充说明： #

• 当你把comparator改成function(model) { return -model.get('order'); }时，集合内部会按order倒序排列，但原视图还是把新模型加到末尾，所以你看不到排序效果；改成comparator: 'title'同理，集合内部按title升序，但DOM还是按添加顺序显示。
• 如果你不想每次排序都重新渲染整个列表，也可以修改addOne方法，根据模型在集合中的排序位置插入到DOM对应位置，但对于简单的Todo应用，重新渲染整个列表是更简洁的方案。

内容的提问来源于stack exchange，提问作者magic