Javascript 主干比较器不工作
我刚开始使用主干网,很难让比较器驱动的排序正常工作。我有一个简单的集合,用于填充页面中的导航菜单。它是从MongoDB后端填充的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
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排序”时,您可以:
但似乎清除和重画是对视图进行排序并使其与集合的排序顺序保持同步的最简单(甚至可能是最快)的方法。我查看了您链接的讨论(URL中的轻微键入,更正版本)但我不确定这是否解决了我面临的问题。我在集合中有一个收集器功能,我认为该功能可以根据任何更改自动对集合进行排序。不是这样吗?此外,在填充集合时,视图被设置为重绘。(原始帖子编辑为包含视图代码)此外,嗅探集合表明非排序发生在集合级别,而不是刷新问题。