Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/sorting/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 主干比较器不工作_Javascript_Sorting_Backbone.js_Comparator - Fatal编程技术网

Javascript 主干比较器不工作

Javascript 主干比较器不工作,javascript,sorting,backbone.js,comparator,Javascript,Sorting,Backbone.js,Comparator,我刚开始使用主干网,很难让比较器驱动的排序正常工作。我有一个简单的集合,用于填充页面中的导航菜单。它是从MongoDB后端填充的 window.navItem = Backbone.Model.extend({ initialize: function(){ return { "title": "no title", "href": "", "class": "", "styl

我刚开始使用主干网,很难让比较器驱动的排序正常工作。我有一个简单的集合,用于填充页面中的导航菜单。它是从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/shounlog属性显示/屏蔽视图成员

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,30,40,50,60,70,80,90,10]

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


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

你只是错过了聆听

关于这个主题,您可能想看一看:

其缺点是,当用户选择“按X排序”时,您可以:

  • 在集合上设置comparator函数
  • 调用集合的排序函数(将触发重置事件
  • 在视图中侦听重置事件,然后(清除并)重新绘制项目
  • 处理步骤1和2的另一种方法是使用自己的方法调用集合的sortBy方法,然后触发视图可以侦听的自定义事件


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

    我查看了您链接的讨论(URL中的轻微键入,更正版本)但我不确定这是否解决了我面临的问题。我在集合中有一个收集器功能,我认为该功能可以根据任何更改自动对集合进行排序。不是这样吗?此外,在填充集合时,视图被设置为重绘。(原始帖子编辑为包含视图代码)此外,嗅探集合表明非排序发生在集合级别,而不是刷新问题。