骨干比较器不工作

Question

我刚开始使用骨干网，但无法让比较器驱动的排序正常工作。我有一个简单的集合，用于填充页面中的导航菜单。它是从 MongoDB 后端填充的。

window.navItem = Backbone.Model.extend({
    initialize: function(){
        return {
            "title": "no title",
            "href": "",
            "class": "",
            "style": "",
            "position": -1,
            "showLog": false,
            "showUnlog": false
        }
    },
});

window.navList = Backbone.Collection.extend({
    url: "../nav",
    initialize: function(){        
    },        
    model: navItem,
    comparator: function(iNavItem){
        return iNavItem.position;
    },
});

编辑以包含查看代码： 只是一个骨架，它具有更改 window.loggedIn 变量状态的逻辑，以根据其 showLog/showUnLog 属性显示/屏蔽视图成员。

window.navView = Backbone.View.extend({
    el: $('#navBar'),
    initialize: function(){
        var self = this;
        this.model.bind("reset", this.render, this);
        this.navTemplate = Handlebars.compile($("#navListTemplate").html());
    },
    events: {
        "click #navLogIn"       : "navLogIn",
        "click #navLogOut"      : "navLogOut"
    },
    render: function() {
        this.json = _.where(this.model.toJSON(), 
            {showUnlog:(!window.loggedIn),
            showLog:(window.loggedIn)});
        $(this.el).html( this.navTemplate(this.json));
        return this;
    },
    navLogIn: function() {
        window.loggedIn = !window.loggedIn;
        this.render();
    },
    navLogOut: function() {
        window.loggedIn = !window.loggedIn;
        this.render();          
    }
});

菜单填充，一切似乎工作正常，除了集合没有按“位置”排序。我有一个菜单项应该位于导航菜单的第二个插槽中，但由于在 MongoDB 中进行编辑，它位于集合中的最后一个。尽管它的“位置”值应该排在第二位，但它始终显示在菜单的最后。

从服务器发送的 JSON 是：

[{
    "_id": "50f6fe449f92f91bc1fcbcf6",
    "title": "Account",
    "href": "",
    "htmlId": "",
    "class": "nav-header",
    "style": "",
    "position": 0,
    "showLog": true,
    "showUnlog": true
},
{
    "_id": "50f6fe449f92f91bc1fcbcf7",
    "title": "Log In",
    "href": "#",
    "htmlId": "navLogIn",
    "class": "",
    "style": "",
    "position": 10,
    "showLog": false,
    "showUnlog": true
},
{
    "_id": "50f6fe449f92f91bc1fcbcf8",
    "title": "New Account",
    "href": "#",
    "htmlId": "",
    "class": "",
    "style": "",
    "position": 20,
    "showLog": false,
    "showUnlog": true
},

剪辑...

最后一项没有被排序到正确的位置，而是显示在最后...

{
    "_id": "50f6fe449f92f91bc1fcbcf9",
    "class": "",
    "href": "#",
    "htmlId": "navLogOut",
    "position": 10,
    "showLog": true,
    "showUnlog": false,
    "style": "",
    "title": "Log Out"
}]

调用 theNavList.pluck('position') （theNavList 是 navList 的实例化副本）给我 [0, 10, 20, 20, 30, 40, 50, 60, 70, 80, 90, 10]。

我尝试在 Firefox 中手动触发集合上的 .sort() 函数，但无论是在显示的菜单中还是在集合本身中，都无法更正集合中的模型顺序。

我觉得我在这里遗漏了一些非常简单的东西。

Answer 1

你只是错过了听。

您可能想查看关于这个主题的discussion：

简而言之，当用户选择“按 X 排序”时，您可以：

1. 在集合上设置比较器功能
2. 调用集合的排序函数（这将触发重置事件
3. 在您的视图中侦听重置事件，并（清除和）重绘项目

处理第 1 步和第 2 步的另一种方法是使用您自己的方法，该方法调用 Collection 的 sortBy 方法，然后触发您的 View 可以侦听的自定义事件。

但似乎清除和重绘是对视图进行排序并使其与集合的排序顺序保持同步的最简单（甚至可能是最快）的方法。