我正在尝试创建一个简单的列表视图，它在我看来就像我正在按照书中所做的一切，但它不起作用。请帮我理解一下流程。最终模板应如下所示：
<div class="panel panel-default">
<div class="panel-heading">
<h3>Search history</h3>
</div>
<div class="panel-body">
<ul class="list">
<li>Hello!</li>
<li>Hello!</li>
<li>Hello!</li>
</ul>
</div>
</div>
主要模板：
<div class="panel panel-default">
<div class="panel-heading">
<h3>Search history</h3>
</div>
<div class="panel-body">
<ul class="list"></ul>
</div>
</div>
这是主要观点：
define([
'jquery',
'underscore',
'backbone',
'doT',
'history/record/record_view',
'history/history_collection',
'text!history/history.html',
], function ($, _, Backbone, doT, RecordView, HistoryCollection, HistoryTemplate) {
var searchView = Backbone.View.extend({
el: '#history',
template: doT.template(HistoryTemplate),
initialize: function () {
this.$hl = this.$('.list');
this.history = HistoryCollection;
console.log('History view initialized...');
this.render();
this.listenTo(HistoryCollection, 'sync', this.fill);
this.listenTo(HistoryCollection, 'change', this.fill);
this.history.fetch();
},
render: function () {
this.$el.html(this.template());
console.log('History rendered...');
return this;
},
addOne: function (data) {
var view = new RecordView({model: data.toJSON()});
this.$hl.append(view.render().el);
},
fill: function(){
this.$hl.empty();
this.history.each(this.addOne, this);
}
});
// Our module now returns our view
return searchView;
});
列表模板：
Hello!
这是一个列表代码：
define([
'jquery',
'underscore',
'backbone',
'doT',
'history/history_model',
'text!history/record/record.html',
], function ($, _, Backbone, doT, Model, RecordTemplate) {
var recordView = Backbone.View.extend({
tagName: 'li',
template: doT.template(RecordTemplate),
model: Model,
initialize: function () {
//Inits
console.log('Record view initialized...');
},
render: function () {
this.$el.html(this.template(this.model));
console.log('Record rendered...');
return this;
},
});
// Our module now returns our view
return recordView;
});