Backbone.js - реализация фрагментов шаблона, принадлежащих тому же представлению

Question

Я пытаюсь создать базовое веб-приложение с Backbone.JS и уже сталкиваться с проблемами понимания в самом начале.

Я думал о следующем HTML структуре:

<script type="text/template" class="t_show">FOO</script> 
static foobar 
<script type="text/template" class="t_show">BAR</script> 

где static foobar всегда визуализируется - .t_show однако только, когда маршрутизатор соответствует #show.

Это мой текущий магистральная код:

var v_show = Backbone.View.extend({ el: $(".client"), template: _.template($('.t_show').html()), render: function() { this.$el.html(this.template(this.model.attributes)); return this; },

что-то уже работает, но только делает самый первый шаблон-частичный (FOO) и статический код (static code), но нет (BAR) ,

Ling story short: Как реализовать фрагменты шаблона, относящиеся к одному и тому же представлению в базовой системе?

Answer 1

Функция jquery's .html() возвращает только html первого совпадающего элемента, поэтому вызов _.template($('.t_show').html()) будет передавать FOO только функции шаблона.

Там есть пара способов, вы могли бы решить это:

• Если вы хотите FOO и BAR, чтобы сделать прямо рядом друг с другом (стайлинг в стороне), вы можете объединить их в один шаблон. Я предполагаю, что это не работает для вашего случая использования, или вы не спросили бы о поддержке нескольких шаблонов, но включили его для полноты.
• Проведите через каждый .t_show и добавьте вместе html() биты и передайте результат _.template(). Это также покажет FOO и BAR рядом друг с другом.
• Назначьте каждый шаблон своей собственной переменной, а затем выполните и визуализируйте шаблоны отдельно.

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

fooTemplate: _.template($('.foo.t_show').html()), 
barTemplate: _.template($('.bar.t_show').html()), 
render: function() { 
    this.$el.html(this.fooTemplate(this.model.attributes)); 
    this.$el.append(this.barTemplate(this.model.attributes)); 
    return this; 
}, 
...