Backbone View не создает «себя»

Question

Я только начал изучать Магистраль и из того, что я видел до сих пор, когда вы создаете представление, и вы определяете имя тега и имя класса, созданное вами представление создается внутри этого элемента, t, что он работает над приведенным ниже кодом, может кто-нибудь объяснить мне почему? Я потратил слишком много времени на это, и моя голова вращается.

var app = {}; 

(function ($) { 
    app.Todo = Backbone.Model.extend({ 
     defaults : { 
      name : '', 
      priority: '', 
      description: '' 
     } 
    }); 

    app.TodoList = Backbone.Collection.extend({ 
     model: app.Todo, 
     url: '#todolist' 
    }); 

    app.TodoListView = Backbone.View.extend({ 
     tagName: 'ul', 
     className: 'todolist', 
     initialize: function() { 
      this.template = _.template($('#todolist-template').html()); 
      this.render(); 
     }, 
     render: function() { 
      this.$el.empty(); 
      this.$el.append(this.template({items: this.collection.toJSON()})); 
      return this; 
     } 
    }); 
    app.todoList = new app.TodoList([ 
     new app.Todo({ 
      name: 'unclog the sink', 
      priority: '10', 
      description: 'FIX THE SINK!!!' 
     }), 
     new app.Todo({ 
      name: 'get bread', 
      priority: '0', 
      description: 'We are out of bread, go get some' 
     }), 
     new app.Todo({ 
      name: 'get milk', 
      priority: '2', 
      description: 'We are out of milk, go get some' 
     }) 
    ]); 

    new app.TodoListView({el: $('#container'), collection: app.todoList}); 
})(jQuery); 

шаблон:

<script type="text/template" id="todolist-template"> 
    <% _.each(items, function(item){ %> 
     <li> 
      <%= item.name %> 
      <%= item.description %> 
      <%= item.priority %> 
     </li> 
    <%}); %> 
</script> 

результат:

<div id="container">  
    <li>unclog the sink FIX THE SINK!!! 10</li> 
    <li>get bread We are out of bread, go get some 0</li> 
    <li>get milk We are out of milk, go get some 2</li> 
</div> 

Answer 1

Я не эксперт в BackboneJS но пытается решить эту проблему. Согласно backboneJS документ о свойствах el, его всегда там, чтобы визуализировать позвоночник. Элемент по умолчанию - <div>, если вы не указали. Вы правильно поняли, что этот элемент будет отображаться внутри него. В коде вы предоставляете элемент <div> как el, поэтому его переопределение свойства tagName при создании нового объекта просмотра. И еще одно: вы вызываете render перед созданием объекта, который может вызвать проблему. Так, согласно моему мнению, вы код должен выглядеть следующим образом:

$("$container").html((new app.TodoListView({collection: app.todoList})).render()) 

Answer 2

Вы должны прочитать о el собственности View, here. Когда вы указываете tagName и className, он создает элемент DOM <ul class="todolist"></ul>, но не добавляет его в DOM. Если элемент уже существует в DOM, вы можете установить el в качестве селектора CSS, который соответствует элементу.

Так что в вашем случае ваш шаблон создается в элементе ul, но сам элемент ul не добавлен в DOM.

Try делает следующее:

ПРИМЕЧАНИЕ: div с id, как container уже должны присутствовать в DOM.

Посмотреть определение:

app.TodoListView = Backbone.View.extend({ 
     el: '#container', 
     initialize: function() { 
      this.template = _.template($('#todolist-template').html()); 
      this.render(); 
     }, 
     render: function() { 
      this.$el.html(this.template({items: this.collection.toJSON()})); 
      return this; 
     } 
    }); 

Шаблон:

<script type="text/template" id="todolist-template"> 
     <ul class="todolist"> 
     <% _.each(items, function(item){ %> 
      <li> 
       <%= item.name %> 
       <%= item.description %> 
       <%= item.priority %> 
      </li> 
     <%}); %> 
     </ul> 
</script> 

Просмотр создания:

new app.TodoListView({collection: app.todoList});