我的问题的快速总结:视图的第一次渲染包含集合中的元素,而第二次渲染不包含。请继续阅读以了解详细信息...
另外值得注意的是:我确实意识到以下代码代表了幸福的道路,并且有很多潜在的错误处理代码丢失,等等,等等......这是为了简洁而故意的。
我对backbone.js 很陌生,并且在找出为以下场景实施解决方案的正确方法时遇到了一些麻烦:
我有一个带有两个主要区域的页面,以包含/显示将成为应用程序主要布局的渲染内容。一般来说,它看起来像这样:
-------------------------------------------
| | |
| | |
| Content | Actions |
| Panel | Panel |
| | |
| | |
| | |
| | |
| | |
| | |
-------------------------------------------
我有一个从中获取数据的 HTTP API,它实际上以 JSON 结果的形式提供各种模块的资源信息,这些信息来自OPTIONS
对每个模块的基本 URL 的调用。例如,OPTIONS
请求http://my/api/donor-corps
返回:
[
{
"Id":0,
"Name":"GetDonorCorps",
"Label":"Get Donor Corps",
"HelpText":"Returns a list of Donor Corps",
"HttpMethod":"GET",
"Url":"https://my/api/donor-corps",
"MimeType":"application/json",
"Resources":null
}
]
该应用程序有一个我正在调用的主干集合,DonorCorpsCollection
它将是一个只读DonorCorpModel
对象集合,可能由多个不同的主干视图呈现并以不同的方式显示在应用程序的不同页面上(最终......稍后...... .目前情况并非如此)。该url
属性DonorCorpsCollection
将需要将对象的属性与初始调用结果的Url
“GetDonorCorps”属性一起获取API模块资源(如上所示)。Name
OPTIONS
该应用程序顶部有一个菜单栏,其中包含链接,单击这些链接将呈现应用程序的各个页面。目前,应用程序中只有两个页面,“主页”页面和“预排序”页面。在“主页”视图中,两个面板中都只有占位符信息,表明用户应该单击菜单栏上的链接来选择要执行的操作。当用户单击“预排序”页面链接时,我只想显示一个主干视图,该视图DonorCorpsCollection
在操作面板中呈现为无序列表。
我目前正在使用JavaScript 模块模式来组织和封装我的应用程序代码,我的模块目前看起来像这样:
var myModule = (function () {
// Models
var DonorCorpModel = Backbone.Model.extend({ });
// Collections
var DonorCorpsCollection = Backbone.Collection.extend({ model : DonorCorpModel });
// Views
var DonorCorpsListView = Backbone.View.extend({
initialize : function () {
_.bindAll(this, 'render');
this.template = _.template($('#pre-sort-actions-template').html());
this.collection.bind('reset', this.render); // the collection is read-only and should never change, is this even necessary??
},
render : function () {
$(this.el).html(this.template({})); // not even exactly sure why, but this doesn't feel quite right
this.collection.each(function (donorCorp) {
var donorCorpBinView = new DonorCorpBinView({
model : donorCorp,
list : this.collection
});
this.$('.donor-corp-bins').append(donorCorpBinView.render().el);
});
return this;
}
});
var DonorCorpListItemView = Backbone.View.extend({
tagName : 'li',
className : 'donor-corp-bin',
initialize : function () {
_.bindAll(this, 'render');
this.template = _.template($('#pre-sort-actions-donor-corp-bin-view-template').html());
this.collection.bind('reset', this.render);
},
render : function () {
var content = this.template(this.model.toJSON());
$(this.el).html(content);
return this;
}
});
// Routing
var App = Backbone.Router.extend({
routes : {
'' : 'home',
'pre-sort', 'preSort'
},
initialize : function () { },
home : function () {
// ...
},
preSort : function () {
// what should this look like??
// I currently have something like...
if (donorCorps.length < 1) {
donorCorps.url = _.find(donorCorpResources, function (dc) { return dc.Name === "GetDonorCorps"; }).Url;
donorCorps.fetch();
}
$('#action-panel').empty().append(donorCorpsList.render().el);
}
})
// Private members
var donorCorpResources;
var donorCorps = new DonorCorpsCollection();
var donorCorpsList = new DonorCorpsListView({ collection : donorCorps });
// Public operations
return {
Init: function () { return init(); }
};
// Private operations
function init () {
getAppResources();
}
function getAppResources () {
$.ajax({
url: apiUrl + '/donor-corps',
type: 'OPTIONS',
contentType: 'application/json; charset=utf-8',
success: function (results) {
donorCorpResources = results;
}
});
}
}(myModule || {}));
最后,这一切都使用以下 HTML:
...
<div class="row-fluid">
<div id="viewer" class="span8">
</div>
<div id="action-panel" class="span4">
</div>
</div>
...
<script id="pre-sort-actions-template" type="text/template">
<h2>Donor Corps</h2>
<ul class="donor-corp-bins"></ul>
</script>
<script id="pre-sort-actions-donor-corp-bin-view-template" type="text/template">
<div class="name"><%= Name %></div>
</script>
<script>
$(function () {
myModule.Init();
});
</script>
...
到目前为止,当我第一次点击“预排序”菜单链接时,我已经能够让它工作。当我单击它时,它会按预期呈现捐赠者军团的列表。但是,如果我然后单击“主页”链接,然后再次单击“预排序”链接,这次我会看到标题,但它<ul class="donor-corp-bins"></ul>
是空的,其中没有列表项。...而且我不知道为什么或我需要做不同的事情。我觉得我一般理解backbone.js 视图和路由器,但在实践中,我显然遗漏了一些东西。
总的来说,这似乎是一个相当直接的场景,我不觉得我在这里尝试做任何特殊的事情,但我无法让它正常工作,而且似乎无法弄清楚原因。非常感谢您的协助,或者至少向正确的方向轻推。