Backbone.js：模板无法识别模型

Question

我有一个模板：

<script type="text/template" id="action-template-item">
    <span data-layer="<%= target%>" data-uuid="<%= uuid%>">delete</span>
</script>

我在视图中渲染模板

    window.ActionView = Backbone.View.extend({
          template: $("#action-template-item").html(),
          initialize: function () {
                this.render();
          },
          render: function () {
              var tmpl = _.template(this.template);
              console.log(this.model);//model have "target"
              this.$el.html(tmpl(this.model));
              return this;
          }

    });

模板只有两个来自模型数据的属性，

在渲染之前，我使用控制台检查模型是否有target值，答案是肯定的，就像上面的评论一样，

我的模型数据是这样的：

{
   target: "xxx-xxx-xxx",
   uuid: "xxx-xxx-xx"
}

但是萤火虫告诉我"target is not defined"

发生了什么？我的代码有什么问题？

Answer 1

您的模型可能看起来像这样：

var M = Backbone.Model.extend({});
var m = new M({
   target: "xxx-xxx-xxx",
   uuid: "xxx-xxx-xx"
});

演示（打开控制台，你会看到你的错误）：http://jsfiddle.net/ambiguous/Rnd6k/

所以当你说

//model have "target"

您的意思可能是this.model.attributes.target 存在。 Backbone 模型属性和 JavaScript 对象属性不是一回事，Underscore 模板会寻找对象属性，它们对 Backbone 模型属性一无所知。

通常的方法是在您想要渲染视图时使用toJSON 序列化您的模型：

render: function () {
    var tmpl = _.template(this.template);
    this.$el.html(tmpl(this.model.toJSON()));
    return this;
}

演示：http://jsfiddle.net/ambiguous/Rnd6k/