0

我正在开始使用骨干网，并且无法让比较器驱动的排序正常工作。我有一个简单的集合，用于填充页面中的导航菜单。它是从 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() 函数，但无论是在显示的菜单中还是在集合本身中，都无法更正集合中的模型顺序。

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

4

1 回答 1

1

你只是错过了听。

您可能想查看有关此主题的讨论：

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

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

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

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

于 2013-01-16T21:49:56.267 回答