Сортировка/фильтрация в Backbone?

Question

[Testtest132]

Представим, что вы заполнили коллекцию моделями и отрендили. Все отображается в на странице, и пользователь захотел все записи вывести в обратном порядке( или, допустим, только те, которые содержат какое-то ключевое слово)
Как лучше поступить в такой ситуации?
На ум приходи вариант сортировать/фильтровать коллекцию и потом все снова в DOM.
Кто как делает?

Answer 1

[aen]

Вы все верно предложили. Чаще всего только так и можно сделать. Главное в DOM вставлять сразу всю отрендеренную коллекцию, а не по одной вьюшке. И не забывать подчищать за собой в случае, если есть какие то лихие биндинги.

Comments

[Testtest132]

aen а не будет ли быстрее, если, допустим, записям, которые не удовлетворяет условиям запроса, поставить display: none - т е скрыть их, вдруг еще пригодятся?

[aen]

Testtest132: теоретически да, но только для фильтрации. Если же вы сортируете, то это уже не сработает. Опять таки, если вы хотите скрывать вьюшку, то вам надо биндить одно из свойств модели на свойство display контейнера вьюшки. Но модель это же чистые данные, а такое свойство может быть просто мусором. Вообще, все это очень сильно зависит от контекста.

Answer 2

[xaseros]

Я считаю что полностью заново рендерить коллекцию при сортировке это вообще шаг назад от идеологии MVC. рендерить заново надо только то что изменилось.

При сортировке или фильтрации, мы можем использовать умное обновление коллекций с сервера. Оно будет вызывать соответствующие события add, remove, change. На любой списочный интерфейс я завожу 4 "класса", например: CommentListViewClass, CommentItemViewClass, CommentCollectionClass, CommentModelClass.

CommentCollection передаем в CommentListView, и вызываем CommentCollection.fetch()
Собственно вся соль делается в CommentListView, его и прифожу.

var CommentsListViewClass = Backbone.View.extend({
        initialize: function(options){
            this.templateData = options && options.templateData || {};
            this.listenTo(this.collection, "add", this.renderItem);
            this.listenTo(this.collection, "add remove sync", this.renderUpdate);
            this.listenTo(this.collection, "sync", this.resortItems);
            
            this.itemViews = [];
        },
        render: function(){
            this.$el.empty();
        },
        renderUpdate: function(){
            $('.comments_count').html(this.collection.length);
        },
        resortItems: function(){
            this.collection.each(_.bind(function(m,i){
                var viewEl = this.$("."+m.cid);
                this.placeItem(viewEl, m);
            }, this));
        },
        placeItem: function(itemEl, model){
            var index = _.indexOf(this.collection.models, model);
            //console.log(index, itemEl,model);
            if(index == 0){
                console.log("#"+ index ,model.id, 'ontop');
                this.$el.prepend(itemEl);
            } else {
                var pIndex = index-1;
                var cid = this.collection.models[pIndex].cid;
                this.$el.find('.'+cid).after(itemEl);
                console.log("#"+ index, model.id, "after " + this.collection.models[pIndex].id );
            }
        },
        renderItem: function(model, collection, options){
            var item = new CommentsItemViewClass({
                model: model,
                templateData: this.templateData
            });
            
            var itemEl = item.render();
            this.placeItem(itemEl, model);
        }
    });

При добавлении новой модели в коллекцию, мы инициализируем новый вид элемента списка, передавая ему эту же модель. Это делает метод render_item.

var item = new CommentsItemViewClass({
                model: model,
                templateData: this.templateData
            });
            //получим DOM-элемент вида
            var itemEl = item.render();

Далее у каждого DOM-элемента (this.el) созданного вида добавляется класс (или любой другой атрибут) с cid той модели которую он отображает (это нужно сделать в шаблоне элемента). Затем нужно определить индекс (позицию) модели в коллекции, и разместить этот элемент под элементом вида предыдущей модели в коллекции (ну или воткнуть на самый верх если таковой не найден), этим далее и занимается метод placeItem .

var index = _.indexOf(this.collection.models, model);
            //console.log(index, itemEl,model);
            if(index == 0){
                this.$el.prepend(itemEl);
            } else {
                var pIndex = index-1;
                //cid предыдущей модели
                var cid = this.collection.models[pIndex].cid;
                this.$el.find('.'+cid).after(itemEl);
            }

Аналогично при полном обновлении коллекции после sync, только пробежаться надо по всем моделям коллекции, дабы расставить все элементы по местам. Это уже resortItems.

this.collection.each(_.bind(function(m,i){
                var viewEl = this.$("."+m.cid);
                this.placeItem(viewEl, m);
            }, this));