Используйте только шаблон для создания базового вида

Question

var ItemView = Backbone.View.extend({ 
    tagName:"li", 
    className:"l-item", 
    template:_.template("#tpl-list-item"), 
    ..... 
}); 

var ListView = Backbone.View.extend({ 
    render:(){ 
     this.collection.each(function(model){ 
      this.$el.append(new ItemView({model:model}).render().$el); 
     }); 
    } 
}); 

<script id="tpl-list-item" type="text/template"> 
    <div> 
     // other markup 
    <div> 
</script> 

Как показано ниже, я хочу обновить представление itemview, мне нужно будет проверить как js, так и файл шаблона.

И я предпочитаю, чтобы построить вид из шаблона только избежать установить представление в коде, как:

<script id="tpl-list-item" type="text/template"> 
    <li class="...."> 
     <div> 
      // other markup 
     <div> 
    </li> 
</script> 

возможно ли это?

Answer 1

Вы можете использовать setElement заменить функции представления el:

SetElementview.setElement(element)

Если вы хотите применить вид Backbone к другому DOM элемента, используйте setElement, который также создаст кэшированную ссылку $el и переместит делегированные события вида от старого элемента к новому.

На практике это будет выглядеть примерно так:

var ItemView = Backbone.View.extend({ 
    template: _.template("#tpl-list-item"), 
    render: function() { 
     this.setElement(this.template(this.model.toJSON())); 
     return this; 
    }, 
    //... 
}); 

и ListView не нужно было бы изменить.

Демо: https://jsfiddle.net/ambiguous/fs9h6o09/

Этот подход в конечном итоге создание и выбрасывая кучу <div> узлов как вид будет создавать пустые <div> S как el, если не сказать ему, чтобы сделать что-то еще через id, className, ... свойства. Эти дополнительные <div> s, вероятно, не будут иметь заметной разницы, но вы можете использовать некоторые обманки, чтобы избежать их.

Магистраль не устанавливает такую ​​политику, но на самом деле хочет отделить el от того, что входит в нее. Вам не обязательно следовать этому, но вы идете против зерна, делая это по-своему.

Answer 2

Если я правильно понял ваш вопрос, вы хотите создать html непосредственно из шаблона?

Это, вероятно, не очень хорошая идея. Представление должно обрабатывать визуализацию шаблона. Технически, хотя вы могли бы сделать что-то вроде следующего:

var ListView = Backbone.View.extend({ 
    render: function(){ 
     var itemTemplate = "#tpl-list-item"; 
     this.collection.each(function(model){ 
      this.$el.append(_.template(itemTemplate,{item:model})); 
     }); 
    } 
}); 

Проблема с делать это, однако, является то, что теперь, если itemTemplate нужно изменить, он не имеет вид обрабатывать эту логику. Чтобы сделать все как можно более модульным, вам лучше создавать шаблон по собственному представлению, чтобы вы могли обновлять/уничтожать шаблон, но, пожалуйста, в качестве представления. Цель обзора проста:

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

Answer 3

Вы можете избежать использования setTemplate(), т. Е. Создавать и выбрасывать узлы ни для чего, и по-прежнему держать свой HTML-код в одном месте в шаблоне.

Backbone.Decarative.Views предоставляет вам чистый способ сделать это. Для получения дополнительной информации ознакомьтесь с my answer here.