Повторно отобразить только измененный раздел Marionette.js CollectionView

Ниже приведен код, который я имею в настоящее время, который повторно отображает коллекциюView при каждом добавлении или удалении модели. Тем не менее, он кажется неэффективным, поскольку он должен делать все это каждый раз, когда мне действительно нужно, чтобы один modelView был удален или один был добавлен. Итак, как я мог достичь этого?Повторно отобразить только измененный раздел Marionette.js CollectionView

var CollectionView = Marionette.CollectionView.extend({ 

    childView: ModelView, 

    initialize: function() { 
     [ "add", "remove" ].forEach(function(eventName) { 
      this.listenTo(this.collection, eventName, this.render, this); 
     }.bind(this)); 
    } 

});

Заранее благодарим за любую помощь, которую вы можете дать!

источник

2016-03-06 user162097

Можете ли вы поделиться [mcve], с которой мы можем играть с ..? –

@TJ Хорошо, я привел пример на JSFiddle [здесь] (https://jsfiddle.net/z5zs3jq0/8/) (так как обязательно нужно несколько строк кода, чтобы заставить его работать, хотя я не знаю, t включил маршрутизатор или любые другие действительно лишние функции). Пример в настоящий момент создает 800 элементов ItemViews и отображает их на странице через CollectionView. Когда вы нажимаете кнопку «Удалить», модель удаляется из коллекции, и представление автоматически перерисовывается. Тем не менее, чем больше элементов на странице, тем больше времени требуется для повторной рендеринга, что подразумевает, что она снова возвращает все это ... – user162097

... вместо того, чтобы просто удалить единственный элемент ItemView из DOM, который быть наиболее эффективным. Например, попробуйте изменить цикл в обработчике событий «start», чтобы он создавал только 8 элементов вместо 800, а затем удалял один, и это заметно ускоряется. – user162097

Это уже сделано automatically in Marionette:

Когда модель добавляется в коллекцию, представление коллекции будет рендеринга, что одна модель для сбора представлений элементов.

Когда модель удалена из коллекции (или уничтожена/удалена), вид коллекции закрывает и удаляет вид элемента этой модели.

источник

2016-03-06 01:56:32 Tholle

Интересно, что вы говорите, что, поскольку он не работает для меня автоматически. Мне нужно посмотреть, может быть, я что-то делаю неправильно. – user162097

Я мог ошибаться, но я думаю, что он обновляется только на странице, когда вызывается функция 'render', которая, как я полагаю, отображает все элементы DOM, а не только те, которые были изменены. – user162097

Tholle прав - изменил ваш пример здесь https://jsfiddle.net/z5zs3jq0/9/ откройте его и откройте консоль - вы увидите сначала 800 рендеров, а затем каждые 2000 миллисекунд другой рендер для нового добавленного элемента + if вы удаляете элемент, вы также увидите один текст рендеринга, добавленный в консоль –

Повторно отобразить только измененный раздел Marionette.js CollectionView

ответ

Смежные вопросы