javascript - 下划线渲染 [对象 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 template想要一个键/值对象作为其参数:

When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables.

看起来您有 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 返回它们或null值。