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想要一个键/值对象作为其参数：

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

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

Answer 2

Underscore Template Editor可能会有所帮助。

Answer 3

如果是来自其他视图，我会使用.html()或.outerHTML，如下所示：

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

下划线渲染[object HTMLDivElement]

3 个答案: