Question

我有一个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只是写进了consol。

P.S。我是WEB开发的新手，完全是JS \ Backbone.js

Answer 1

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

Answer 2

只需更改comparator：

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

不会对集合进行重新排序，除非您说明，否则集合无法知道comparator已更改。您需要致电sort强制解决此问题：

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

我在这儿的其他一些事情：

您最初的comparator：
```
comparator: function (property){
    return selectedStrategy.apply(model.get(property));
}
```
无效（除非您在某处定义了全局selectedStrategy），您可能应该将其删除，并initialize通过调用changeSort来设置它。
< / LI>
this.bind('all', this.render());没有任何帮助，bind想要一个函数作为第二个参数，但this.render() 调用 render方法。您可能根本不想在那里拨打this.bind电话，如果您这样做，则需要说this.bind('all', this.render)。
视图处理collection选项与处理their constructor中model选项的方式类似：

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

因此，如果您的观点是基于收藏的，则您需要说new View({ collection: ... })并使用this.collection代替this.model以避免混淆。
收藏品有各种Underscore functions built-in，所以不要说：
```
_.each(this.model.models, ...
```
当你可以这样说时：
```
this.collection.each(...
```
View内置了el的jQuery包装版本，因此您可以使用this.$el而不是$(this.el)（每次调用时都会重建jQuery包装器）。< / p>

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

2 个答案: