Question

我的视图包含如下所示的模板：

<script type="text/template" id="template">
   <div id="<%=cid=>"></div>
   <label><%= label %></label>
   <input type="text" id="search_input" />
   <input type="button" id="search_button" value="Search" />
</script>

我需要使用模型数据渲染此模板，因此我执行以下操作：

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

但遗憾的是this.model.toJSON（）没有将cid（clientId）传递给我的模板。请问您能解释一下如何在我的模板中访问cid以及如何处理这个问题？

Answer 1

toJSON只是克隆attributes数组。这就是为什么没有cid的原因。如果您需要模型中的 cid ，则可以将其混合到模板对象中：

var templateData = _.extend(this.model.toJSON(), { cid: this.model.cid });
var template = _.template( $("#template").html(), templateData);

但如果您需要div的唯一ID，我建议使用_.uniqueId()

Answer 2

也许您可以覆盖toJSON()类的Backbone.Model方法，如下所示：

var Person = Backbone.Model.extend({
    defaults:{
        name:''
    },
    toJSON: function() {
       var json = Backbone.Model.prototype.toJSON.apply(this, arguments);
       json.cid = this.cid;
       return json;
    }
});

var PersonItemView = Backbone.View.extend({
     tmpl:'<div data-cid="<%=cid%>"><%=name%></div>',
     render: function () {
         var template = _.template( this.tmpl)(this.model.toJSON());
         this.$el.html( template );
         return this;
     }
});
var person =  new Person({name:'John'})
var personItemView = new PersonItemView({model:person});
personItemView.render().$el.appendTo('body');

结果就像这样：

<div><div data-cid="c8">John</div></div>

因此，如果您想根据模型获取视图，可以

var cid = person.cid ;
var $personItem = $('[data-cid="+ cid +"]').parent();

使用cid，您可以在模型和视图之间建立连接。

是否可以在模板中传递cid字段？

2 个答案: