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

【问题标题】：Is it possible to pass cid field in template?是否可以在模板中传递 cid 字段？
【发布时间】：2014-04-14 12:53:16
【问题描述】：

我有一个视图，其模板如下所示：

<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 以及你如何处理这个事情吗？

【问题讨论】：

标签： backbone.js model-view-controller underscore.js template-engine underscore.js-templating

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

也许你可以重写Backbone.Model类的toJSON()方法，如下：

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，您可以建立模型和视图之间的连接。

【讨论】：