Подчеркивание рендеринга [объект HTMLDivElement]

Question

У меня есть шаблон подчеркивания, что прилагая следующий текст «[объект HTMLDivElement]» , но он должен добавить значение, что «model.get („название“)» возвращается.

Вот мой шаблон:

<script type="text/template" id="todoTemplate"> 
    <div class='todoBlock'> 
    <li class='appendedTodo'> 
     <%= title %> 
    </li> 
    <button class='delete'>Delete</button><p> 
    </div> 
</script> 

Вот моя функция:

addTodoLi: function(model){ 
    var todoData = model.get('title'); 
    var compileTemplate = _.template($('#todoTemplate').html()); 
    $('#todo-list').append(compileTemplate(todoData)); 
    }, 

Answer 1

Ваш todoData будет (предположительно) строка:

var todoData = model.get('title'); 

но скомпилированный Underscore template хочет ключ/в качестве аргумента:

Когда вы оцениваете функцию шаблона, передайте объект , который имеет свойства, соответствующие свободным переменным шаблона.

Похоже, у вас есть title глобальных переменной или window свойства, которое является <div> объектом DOM или вы получите бы, ReferenceError жалуясь неизвестной title переменного вместо строкового объектом DOM.

В любом случае, исправить довольно легко: дать шаблонную функцию, что он хочет:

$('#todo-list').append(compileTemplate({ title: todoData })); 

или общий Backbone подход:

$('#todo-list').append(compileTemplate(model.toJSON())); 

Есть случаи, когда модель будет иметь необязательные атрибуты, к которым должны обращаться шаблоны. В таких случаях, вы можете иметь:

<%= pancakes %> 

в шаблоне, но иногда toJSON даст вам:

{ title: 'x' } 

и другие времена, вы получите:

{ title: 'x', pancakes: 11 } 

В таком случае вам нужно «un-optionalize» необязательные атрибуты в вашем toJSON: toJSON должен предоставить все. Если у вас есть необязательные атрибуты, то toJSON должен убедиться, что он возвращает их с значениями undefined или null.

Answer 2

Underscore Template Editor может быть полезен для начала.

Answer 3

Если с другой точкой зрения, я использую .html() или .outerHTML так:

otherview: view.render().$el.html() 
otherview: view.render().el.outerHTML