0

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

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

4

2 回答 2

0

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

于 2013-09-03T19:49:57.663 回答
0

只需更改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和。tagNameattributes

    所以，如果你的视图是基于集合的，你会想说new View({ collection: ... })并使用this.collection而不是this.model避免混淆。

  4. 集合内置了各种下划线函数，所以不要说：

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

    当你可以这样说时：

    this.collection.each(...

  5. View 有一个el内置的 jQuery 包装版本，因此您可以使用this.$el代替$(this.el)（每次调用它时都会重建 jQuery 包装器）。

于 2013-09-03T20:18:47.213 回答