Backbone JS: шаблон рендеринга без чего-то вроде $ ('body'). Append?

Question

Используя внешний шаблон, я пытаюсь отобразить представление JS Backbone в DOM. К сожалению, я получаю пустой экран, а проверка с помощью консоли подтверждает, что все работает.

Чтобы получить визуализированный шаблон в DOM, я должен сделать что-то вроде $('body').append(myView.render().el);, которое, согласно многим ресурсам, не должно быть необходимым. Например, this view от реализации Backbone проекта TodoMVC не включает ничего подобного $('body').append, что заставляет меня поверить в то, что в моем коде что-то не так, но я не могу его найти.

шаблон в моем HTML выглядит следующим образом:

<script id="name-template" type="text/template"> 
    <%= name %> (<%=age %>) 
</script> 

И это код приложения:

var App = App || {}; 

App.Models = {}; 
App.Views = {}; 

App.Models.Person = Backbone.Model.extend({ 
    defaults: { 
     name: 'Peter', 
     age: 34 
    } 
}); 

App.Views.Person = Backbone.View.extend({ 
    tagName: 'p', 
    template: _.template($('#name-template').html()), 
    initialize: function() { 
     console.log(this.model); 
    } 
}); 

App.personModel = new App.Models.Person(); 
App.personView = new App.Views.Person({model: personModel}); 
App.personView.render(); 

Что я должен изменить так, чтобы при загрузке страницы, тонированное шаблон добавлен DOM?

Answer 1

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

App.personView = new App.Views.Person({model: personModel, el: '#someElement'}); 
App.personView.render(); 

Вот немного более длинная версия.

Основа el действительно является ссылкой на элемент DOM, независимо от того, была ли она уже прикреплена к странице или нет, и в этом смысле она не является чем-то иным, чем регулярной ссылкой на элемент DOM. Рассмотрим следующий простой ванили JavaScript код

var pElement = document.createElement("p"); 
var pElement = $('p'); //using jQuery 

На данный момент pElement содержит ссылку на элемент DOM, а не прикреплен к странице (пока). Все, что вы приложите к этому p элементу не будет заметно, пока вы не установите его на страницу, используя что-то вроде следующего

document.body.appendChild(pElement); 
$('body').append(pElement); //or using jQuery 

Если вместо создания нового p элемента, а не получил ссылку на существующий элемент, любой изменения, сделанные к этому элементу будет немедленно отражены на странице,

var pElement = document.getElementById('#myPElement'); 
var pElement = $('#myPElement'); //using jquery 

на этом этапе вы можете манипулировать pElement как вы хотите, не подключая его к странице, поскольку она уже является частью страницы.