排序按钮在Backbone.js中不起作用

zpjtge22  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(140)

我有一个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

f0brbegy

f0brbegy1#

只需更改comparator

changeSort: function (sortProperty) {
    this.comparator = this.strategies[sortProperty];
}

不会对集合重新排序,除非您告诉集合,否则集合无法知道comparator已更改。您需要通过调用sort

changeSort: function (sortProperty) {
    this.comparator = this.strategies[sortProperty];
    this.sort();
}

还有一些其他的事情,我在这里:
1.您的初始comparator

comparator: function (property){
    return selectedStrategy.apply(model.get(property));
}

是无效的(除非您在某处定义了一个全局selectedStrategy),您可能应该忽略它,让initialize通过调用changeSort来设置它。

  1. 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.收藏有各种内置下划线函数,所以不要说:
_.each(this.model.models, ...

你可以这样说:

this.collection.each(...

1.视图内置了一个jQuery Package 的el版本,因此您可以使用this.$el而不是$(this.el)(每次调用它时都会重新构建jQuery Package 器)。

2hh7jdfx

2hh7jdfx2#

您正在model上调用changeSort方法,但该方法在您的collection上(这是应该的)

相关问题