下划线渲染 [对象 HTMLDivElement]

我有一个下划线模板，附加以下文本“[对象 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) );
  },

Your todoData（大概）是一个字符串：

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

但编译的下划线模板 http://underscorejs.org/#template想要一个键/值对象作为其参数：

当您评估模板函数时，传入data具有与模板的自由变量相对应的属性的对象。

看起来你有一个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 }

在这种情况下，您需要“取消可选”您的可选属性toJSON: toJSON应该供应一切。如果您有可选的属性，那么toJSON应该确保它返回它们undefined or null values.