我有一个JSON文件,我需要把它解析成集合,并把它呈现到HTML页面上,然后我需要添加一个按钮,它会对这个集合进行排序,并在页面上重新绘制它。这是我做的代码:
这是关于模型、收集和排序的部分:
var Profile = Backbone.Model.extend();
var ProfileList = Backbone.Collection.extend({
model: Profile,
url: 'profiles.json',
selectedStrategy: "count",
comparator: function (property){
return selectedStrategy.apply(model.get(property));
},
strategies: {
count: function (model) {return model.get("count");},
name: function (model) {return model.get("name");}
},
changeSort: function (sortProperty) {
this.comparator = this.strategies[sortProperty];
},
initialize: function () {
this.changeSort("count");
},
});
它是视图和按钮:
var ProfileView = Backbone.View.extend({
el: "body",
template: _.template($('#profileTemplate').html()),
Sort: null,
initialize: function() {
this.Sort = new ReSortView();
this.bind('all', this.render());
},
render: function() {
_.each(this.model.models, function(profile){
var profileTemplate = this.template(profile.toJSON());
$(this.el).append(profileTemplate);
}, this);
return this;
},
ReSort: function (){
console.log("111");
this.model.changeSort("name");
},
events: {
"click .Sort": "ReSort",
//"click.NSort": "NSort"
},
});
var ReSortView = Backbone.View.extend({
el: $("#Sort")
});
var AppView = Backbone.View.extend({
el: "body",
initialize: function() {
var profiles = new ProfileList();
var profilesView = new ProfileView({
model: profiles
});
profiles.bind('all', function () {
profilesView.render();
});
profiles.fetch({success: function (model,resp) { console.log(resp);}});
}
});
var App = new AppView();
});
问题是为什么当我运行它的时候,一切似乎都很好,但是排序不起作用,FireBug什么也不说,Button只是在控制台上写东西。
P.S.我是新的WEB开发和准确地在JS\Backbone.js
2条答案
按热度按时间f0brbegy1#
只需更改
comparator
:不会对集合重新排序,除非您告诉集合,否则集合无法知道
comparator
已更改。您需要通过调用sort
:还有一些其他的事情,我在这里:
1.您的初始
comparator
:是无效的(除非您在某处定义了一个全局
selectedStrategy
),您可能应该忽略它,让initialize
通过调用changeSort
来设置它。this.bind('all', this.render());
没有任何用处,bind
想要一个函数作为第二个参数,但是this.render()
* 调用了render
方法。你可能根本不想在这里调用this.bind
,如果你想的话,你会想说this.bind('all', this.render)
。1.视图处理
collection
选项的方式与在其构造函数中处理model
选项的方式类似:有几个特殊选项,如果传递,将直接附加到视图:第一个是第二个是第三个,第四个是第三个。
因此,如果您视图是基于集合的,则应该使用
new View({ collection: ... })
,并使用this.collection
代替this.model
,以避免混淆。1.收藏有各种内置下划线函数,所以不要说:
你可以这样说:
1.视图内置了一个jQuery Package 的
el
版本,因此您可以使用this.$el
而不是$(this.el)
(每次调用它时都会重新构建jQuery Package 器)。2hh7jdfx2#
您正在
model
上调用changeSort
方法,但该方法在您的collection
上(这是应该的)