下划线渲染[对象HTMLDivElement]

Question

我有一个下划线模板，它附加以下文本“ [object HTMLDivElement] ”，但是应该附加“ model.get（'title'）”返回的值。

这是我的模板：

<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模板需要键/值对象作为其参数：

在评估模板函数时，请传入一个具有与模板的自由变量相对应的属性的数据对象。

看起来您具有作为<div> DOM对象的title全局变量或window属性，或者您将收到ReferenceError抱怨未知的title变量而不是字符串化的DOM对象。

无论如何，解决方法都非常简单：为模板函数提供所需的功能：

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

或常见的骨干方法：

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

在某些情况下，模型将具有模板需要访问的可选属性。 在这种情况下，您可能会：

<%= pancakes %>

在模板中，但有时toJSON将为您提供：

{ title: 'x' }

而其他时候您会得到：

{ title: 'x', pancakes: 11 }

在这种情况下，您需要“取消可选” toJSON的可选属性： toJSON应该提供所有内容。 如果您具有可选的属性，那么toJSON应该确保它以undefined或null值返回它们。

Answer 2

下划线模板编辑器可能对您有所帮助。

Answer 3

如果是从另一个角度来看，则使用.html()或.outerHTML如下所示：

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