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

The sort-button does not work in Backbone.js

本文关键字：不起作用 js Backbone 按钮 排序      更新时间：2023-09-26

我有一个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只是在控制台中写入。

附言：我是WEB开发的新手，完全是JS''Backbone.JS

仅更改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来设置它。

  2. this.bind('all', this.render());没有任何作用，bind想要一个函数作为第二个参数，但this.render()调用render方法。你可能根本不想在那里打this.bind电话，如果你打了，你会说this.bind('all', this.render)。

  3. 视图处理collection选项的方式类似于在其构造函数中处理model选项的方式

    有几个特殊选项，如果通过，将直接附加到视图：model、collection、el、id、className、tagName和attributes。

    因此，如果您的视图是基于集合的，那么您应该说new View({ collection: ... })，并使用this.collection而不是this.model来避免混淆。

  4. 集合内置了各种Undercore功能，所以不要说：

    _.each(this.model.models, ...

    当你可以这样说的时候：

    this.collection.each(...

  5. View内置了el的jQuery包装版本，因此您可以使用this.$el而不是$(this.el)（每次调用它时都会重新构建jQuery包装）。

您在model上调用changeSort方法，但该方法在您的collection（应该是）上

相关文章：