下划线渲染 [对象 HTMLDivElement] [英] Underscore rendering [object HTMLDivElement]

问题描述

我有一个下划线模板，它附加了以下文本[object HTMLDivElement]"，但它应该附加model.get('title')"返回的值.

这是我的模板:

这是我的功能:

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

解决方案

你的 todoData 是(大概)一个字符串:

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

但是编译后的 Underscore 模板 需要一个键/值对象作为其参数:

<块引用>

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

看起来你有一个 title 全局变量或 window 属性，它是一个

DOM 对象，否则你会得到一个 ReferenceError抱怨一个未知的 title 变量而不是一个字符串化的 DOM 对象.

无论如何，修复非常简单:给模板函数提供它想要的:

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

或常见的 Backbone 方法:

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

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

<%= 煎饼 %>

在模板中，但有时 toJSON 会给你:

{ title: 'x' }

其他时候你会得到:

{ title: 'x', pancakes: 11 }

在这种情况下，您需要取消选择"toJSON 中的可选属性:toJSON 应提供所有内容.如果您有可选的属性，则 toJSON 应确保它以 undefined 或 null 值返回它们.

I have an underscore template that is appending the following text "[object HTMLDivElement]" , but it's supposed to append value that "model.get('title')" returns.

Here's my template:

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

Here's my function:

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

解决方案

Your todoData is (presumably) a string:

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

but a compiled Underscore template wants a key/value object as its argument:

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

Looks like you have a title global variable or window property that is a <div> DOM object or you would get a ReferenceError complaining about an unknown title variable instead of a stringified DOM object.

In any case, the fix is pretty easy: give the template function what it wants:

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

or the common Backbone approach:

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

There are cases where the model will have optional attributes that the templates need to access. In such cases, you might have:

<%= pancakes %>

in the template but sometimes toJSON will give you:

{ title: 'x' }

and other times you'll get:

{ title: 'x', pancakes: 11 }

In such case you need to "un-optionalize" the optional attributes in your toJSON: toJSON should supply everything. If you have attributes that are optional then toJSON should ensure that it returns them with undefined or null values.

这篇关于下划线渲染 [对象 HTMLDivElement]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！