Вид с динамическим идентификатором

Я просто понял, что неправильно понял атрибут el Backbone.View. В основном мои представления требуют динамических атрибутов id, основанных на его атрибуте модели. Я думал, что это работает нормально, потому что я просто указал его в своем шаблоне:

<script type="text/template" id="item_template">
  <li class="item" id="{{identifier}}">
    <span class="name">{{name}}</span>
  </li>
</script>

Однако, я понял, что то, что на самом деле делал Backbone, это поместить этот скомпилированный шаблон в другой элемент div по умолчанию. Об этом я узнал, прочитав документацию, но я все еще смущен тем, как создать динамический id.

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

Я попытался установить его в методе initialize, this.id = this.model.get('attr'), но это не показало никакого эффекта, возможно, потому что к этому времени уже слишком поздно.

В настоящее время я использую jQuery для добавления id во время render():

this.el.attr(id: this.model.get('identifier'));

он работает, но, конечно, я просто спрашиваю, есть ли предпочтительный способ сделать это через Backbone.

Ответ 1

Да, есть стандартный способ сделать это в Backbone. Вы можете передать id в конструктор вида. Вы также можете реорганизовать свой шаблон так, чтобы Backbone создавал для вас родительский элемент <li>. Попробуйте этот простой шаблон:

<script type="text/template" id="item_template">
  <span class="name">{{name}}</span>
</script>

И добавьте их в свое представление:

myView = Backbone.View.extend({
  className: "item",
  tagName: "li"
})

И создайте его следующим образом:

var view = new YourView({
  model: mymodel,
  id: mymodel.get('identifier') // or whatever
})

Удачи!

Ответ 2

Существует еще один подход. Я нашел это более удобным, чем передача id каждый раз, когда вы создаете экземпляр вашего представления.

Шаблон:

 <script type="text/template" id="item_template">
      <span class="name">{{name}}</span>
 </script>

Вид:

var MyView = Backbone.View.extend({
    tagName: 'li',
    attributes: function(){
       return { 
           id: this.model.get('identifier'),
           class: 'item'//optionally, you could define it statically like before
       }
    }
})

Ответ 3

Когда вы создаете свое представление, перейдите к селектору, который позволит просмотру найти существующий предварительно обработанный элемент DOM:

var id = "1234";
var view = YourView({el: '#'+id});