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.logIn变量状态的逻辑的框架，用于根据showLog / showUnLog属性显示/屏蔽View成员。

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"
}]

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

我已经尝试在Firefox中对集合手动触发.sort（）函数，但无法在显示的菜单中或集合本身中更正集合中的模型顺序。

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

Answer 1

你只是错过了听力。

您可能希望查看此主题的discussion：

缺点是，当用户选择“按X排序”时，您可以：

在Collection
调用Collection的sort函数（将触发重置事件
在视图中监听重置事件，并（清除和）重绘项目

处理步骤1和1的另一种方法2是拥有自己的方法来调用Collection的sortBy方法，然后触发View可以监听的自定义事件。

但似乎清理和重绘是最简单（甚至可能是最快）的方式来对View进行排序并使它们与Collection的排序顺序保持同步。

骨干比较器不工作

1 个答案: