我有这个表的模板
<script id="allFaxesTemplate" type="text/template">
<td><%= FaxSentDate %></td>
<td><%= SentTime %></td>
<td><%= FaxRecipient %></td>
<td><%= FullName %></td>
<td><%= FaxSubject %></td>
<td><%= FaxCategory %></td>
<td><%= NumberOfRequests %></td>
</script>
我的主干观点
/*
|----------------------------------------------------------------------------------------
| Comment: All Faxes View ====> Table View
|----------------------------------------------------------------------------------------
*/
App.Views.Faxes = Backbone.View.extend({
tagName: 'tbody',
render: function () {
this.collection.each(this.addOne, this);
return this;
},
addOne: function (fax) {
var faxView = new App.Views.Fax({ model: fax });
//console.log(faxView.render().el);
this.$el.append(faxView.render().el);
}
});
/*
|----------------------------------------------------------------------------------------
| Comment: Single Fax View ===> Row View
|----------------------------------------------------------------------------------------
*/
App.Views.Fax = Backbone.View.extend({
tagName: 'tr',
template: template('allFaxesTemplate'),
events: {
'click': 'details'
},
/*
initialize: function () {
vent.on('QADetails:show', this.showDetails, this);
},*/
render: function () {
var context = this.model.toJSON();
context['FaxSentDate'] = this.getDateFormat(this.model.get('FaxSentDate'));
context['SentTime'] = this.getTimeFormat(this.model.get('SentTime'));
this.$el.html(this.template(context));
return this;
},
details: function () {
console.log(this.model.get('FaxID'));
//console.log(this.model);
vent.trigger('fax:details', this.model);
},
//Change the date format from timespan
getDateFormat: function (oldDate) {
var newDate = new Date(parseInt(oldDate.substr(6)));
return newDate.toDateString('MM-dd-yyyy');
},
//Change the time format from timespan
getTimeFormat: function (oldTime) {
var newTime = new Date(parseInt(oldTime.substr(6)));
return newTime.toLocaleTimeString();
}
});
用于在单击时显示行详细信息的骨干视图
/*
|----------------------------------------------------------------------------------------
| Comment: Details View ===> Details per Row
|----------------------------------------------------------------------------------------
*/
App.Views.FaxDetailsView = Backbone.View.extend({
template: template('faxQADetails'),
initialize: function () {
this.render();
},
render: function () {
var html = this.template(this.model.toJSON());
this.$el.html(html);
return this;
}
});
有一个与上述视图相关的模板(代码未显示)。
到目前为止,它在显示数据方面起作用,但它并没有按照我的意愿去做。当我点击该行时,我希望行中的详细信息显示在div中。 Backbone附加div,但它将它附加在所有trs之间。我只是想把它只附加到我点击的tr上。请帮忙!
谢谢