Динамические шаблоны или xhr

Question

Я только что начал использовать backbone.js для проекта, над которым я работаю.

В настоящее время у меня все настроено так, как я хочу, до моделей, коллекций и просмотров. Я получаю данные от приложения REST на своем сервере.

Клиенты могут войти в приложение; в настоящее время я загружаю эту информацию в шаблон underscore.js, но хочу, чтобы шаблон был динамическим. Некоторые варианты будут отличаться в зависимости от клиента.

Мое ощущение, что наличие шаблона делает конкретные вызовы ajax для получения динамической информации, приведет к победе в цели использования backbone.js в целом. Возможно ли, что опорный и нижний подчеркивания загружают шаблон из запроса xhr? Или есть еще лучший способ сделать это?

Спасибо за помощь заранее.

Answer 1

Шаблон - это всего лишь строка, которая касается Underscore, поэтому вы можете получить эту строку из любого места, где хотите. Таким образом, вы можете сделать это:

render: function() { 
    var that = this; 
    $.get('/some_template', function(tmpl) { 
     that.$el.html(_.template(tmpl, that.model.toJSON())); 
    }); 
    return this; 
} 

В реальной жизни вы, вероятно, хотите, чтобы скрыть, что за простым объектом кэширования, который только извлекает определенный шаблон с сервера один раз.

Или вы могли бы позволить ваш код сервера выяснить, какой набор шаблонов, необходимых и встраивать их в <script> элементов:

<script id="tmpl1" type="text/template"> 
    Some template code... 
</script> 
<script id="tmpl2" type="text/template"> 
    Some template code... 
</script> 
... 

и вытащить шаблоны из <script> с:

render: function() { 
    var tmpl = _.template($('#tmpl1').html()); 
    this.$el.html(tmpl(this.model.toJSON())); 
    return this; 
} 

И снова вы можете захотеть кэшировать скомпилированный шаблон tmpl, где-нибудь или даже скомпилировать его при определении класса представления (при условии, что DOM уже достаточно готов):

var V = Backbone.View.extend({ 
    template: _.template($('#tmpl1').html()), 
    //... 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
});