javascript - 在渲染之前对 Backbone 集合进行排序

Question

编辑:要对 Backbone Collection 进行排序，您只需指定一个比较器(无需定义 sortBy 机制)，如下所示: dictionary.add(entry); dictionary.comparator = 'word';

---

我在对使用 .add()(未预加载)推送新模型的集合进行排序时遇到问题。我尝试使用下面的下划线排序方法

 var sorted = _(dictionary).sortBy("word");

但我无法让集合做出响应。下面是我的代码。我已经在底部注释掉了我的不起作用的代码。

(function($){

    //---------SINGLE ENTRY MODEL----------
            var Entry = Backbone.Model.extend({
                defaults: function(){
                    return{
                        word: '',
                        definition: ''
                    }
                }
            });

        //------------ENTRY MODEL COLLECTION------------
            var EntryList = Backbone.Collection.extend({
                model: Entry
            });

        //-----INSTANCIATE COLLECTION----
        var dictionary = new EntryList();

        //-----SINGLE ENTRY VIEW------
        var EntryView = Backbone.View.extend({
            model: new Entry(),
            tagName:'div',

            events:{
                'click .edit': 'edit',
                'click .delete': 'delete',
                'keypress .definition': 'updateOnEnter'
            },

            delete: function(ev){
                ev.preventDefault;
                dictionary.remove(this.model);
            },

            edit: function(ev){
                ev.preventDefault;
                this.$('.definition').attr('contenteditable', true).focus();

            },
            close: function(){
                var definition = this.$('.definition').text();
                this.model.set('definition', definition);
                this.$('.definition').attr('contenteditable', false).blur();

            },

            updateOnEnter: function(ev){
                if(ev.which == 13){
                    this.close();
                }
            },

            initialize: function(){
                this.template = _.template($("#dictionary_template").html());

            },

            render: function(){
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
        });

        //--------------DICTIONARY VIEW------------
        var DictionaryView = Backbone.View.extend({
            model: dictionary,
            el: $('#entries'),

            initialize: function(){
                this.model.on('add', this.render, this);
                this.model.on('remove', this.render, this);

            },

            render: function(){
                var self = this;
                self.$el.html('');
                _.each(this.model.toArray(), function(entry, i){
                    self.$el.append((new EntryView({model: entry})).render().$el);
                });

                return this;
            }
        });


        //-------BINDING DATA ENTRY TO NEW MODEL VIEW-------
        $(document).ready(function(){
            $('#new-entry').submit(function(ev){
                var entry = new Entry({word: $('#word').val(), definition: $('#definition').val() });

                dictionary.add(entry);

                //var sorted = _(dictionary).sortBy("word");
                //console.log(sorted.toJSON());

                console.log(dictionary.toJSON());

                $('.form-group').children('input').val('');

                return false;
            });
            var appView = new DictionaryView();
        });
    })(jQuery);
</script>

Answer 1

我认为你的问题是你将直接Underscore.js sortBy 应用到dictionary，它不是collection sense Underscore.js 理解它。相反，它是一个 Backbone.Collection (J. Ashkenaz 编写了 Backbone 和 Underscore.js，这对您没有任何帮助)。因此，不幸的是，在 dictionary 上运行 sortBy 会给您带来不可预测的结果(因为您在 Backbone.Collection 上有各种其他父属性> 除了 models 属性之外。所以...

使用排序

我认为最简单并且可能是最稳定的解决方案是使用Backbone.Collection.sort()。这一切的美妙之处在于，一旦您提供了一个比较器，Backbone 就会自动为您对集合进行排序(我不是在开玩笑，请查看 docs )。 (顺便说一句，您可以通过传入 { sort: false } 在 Backbone.Collection.add() 上禁用此功能。)

使用比较器

根据docs (强调我的):

A comparator can be defined as a sortBy (pass a function that takes a single argument), as a sort (pass a comparator function that expects two arguments), or as a string indicating the attribute to sort by.

在您的情况下，如果您添加该行

dictionary.comparator = "word";

在您的第一个添加函数之前(例如在实例化集合之后)，您应该已准备就绪。