Render parts of template

Question

У меня есть вид Backbone, и я использую Handlebars для загрузки шаблонов на мой взгляд.

У меня есть список #list в шаблоне, который необходимо обновить в представлении, и после этого его нужно повторно отобразить. Я хочу повторно отобразить только часть, которая изменилась, так что только #list без перезагрузки всех моих DOM (и поэтому всех помощников Handlebars, которые у меня есть).

Я попытался это:

template: Handlebars.compile(templateHtml), 

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

renderList: function() { 
    var html = this.template(this.model.toJSON()); 
    var selector = "#list"; 

    this.$el.find(selector).replaceWith($(selector, html)); 
} 

, но это очень медленно, потому что я думаю, что это вновь делает все DOM до изменения #list содержания, как мне нужно.

Есть ли лучший способ сделать это?

Это хорошая идея поместить содержимое #list в другой шаблон и загрузить его как subView? В этом случае, как я могу инициировать обновление списка из моего первого представления?

Благодаря

Answer 1

Лучше обновить только часть вашего оказанного зрения, создав специальный метод визуализации, что-то я explained here.

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

Если в шаблоне действительно много, кроме list, у вас может быть два шаблона в вашем представлении, один будет общим, а другой - только для списка, который вы будете монтировать в первый в глобальном рендеринге, с возможностью обновления только списка.

Кроме того, вам может не понадобиться второй шаблон, если #list является просто контейнером для списка. Я могу представить, что это может быть тег <ul>, который вы будете монтировать в нужном месте во время глобального рендеринга, а затем обновите его другими настраиваемыми методами визуализации.

Кроме того, я написал пример здесь, который может быть потенциально полезным в вашем случае: Backbone.js fetch() JSON to model get() returnes undefined - в примере есть шаблон, который имеет контейнер для списка, а список управляется отдельно от его собственной коллекции.

Только некоторые мысли.