【问题标题】:Backbone/Marionette decouple views from getting dataBackbone/Marionette 将视图与获取数据分离
【发布时间】:2015-07-27 21:21:20
【问题描述】:
我的应用程序中有“项目列表”。每个项目都有名称、描述和成员列表(姓名+姓氏)。
看起来我必须获取项目列表(名称、描述等),并为每个项目获取成员列表。这意味着我有一些级别的视图,每个级别都获取集合并创建另一个视图/子视图的实例。
所有集合都在视图初始化方法中获取,并从 REST 服务异步加载。
这意味着我无法确定 ListOfProjectView 何时准备就绪(因为子视图),我遇到了另一个问题......
问题 - 如何正确使用视图?
1)如果我在视图内获取数据是否正常,或者我应该将完整的数据传递给视图?
2)在另一个视图中创建视图实例是否正确?
【问题讨论】:
标签:
javascript
backbone.js
marionette
fetch
【解决方案1】:
在initialize 上获取模型会强制你获取async,否则你会运行一个竞争条件,在你渲染视图时集合将是空的。
我通常会在实例化视图之前实例化我的集合并获取其模型。我通过利用 Promises 来处理事件的实际顺序。默认情况下,Backbone 同步将实现$.ajax()。当你进行 fetch 时,fetch 将返回一个 jQuery Promise。因此,我的视图创建周期将如下所示:
var myView;
var options = {
collection: new MyCollection // Instantiate your collection
};
// the then function takes two callbacks, first for success and a second for failure
options.collection.fetch().then(function(){
myView = new MyView(options) // Your collection is a property of this options
// object. It is guaranteed to have returned from
// the fetch and should be full
myView.render();
}, errorCallback);
关于您的第二个问题,如果子视图是视图层次结构的一部分,则在视图中处理视图没有任何问题。这不是唯一的方法。但这很有意义,总的来说,我没有遇到任何问题。
【解决方案2】:
如果您正在使用 Marionette(而且您应该使用),那么您所描述的内容如下:
ListOfProjects 哪个是CompositeView(或CollectionView),哪个itemView(childView)是Project,哪个本身就是CompositeView,哪个itemView 是Member。
Marionette 将在数据可用时呈现视图,因此假设您有一个普通的 REST api,它会执行以下请求:
/项目
/projects/1/成员
/projects/2/成员
...
/projects/N/成员
项目列表将在第一个请求完成后呈现,每个项目的成员将在获取集合后立即呈现。
如果您想优化网络请求的数量(如果项目数量很大),那么您可能希望在每个项目的 JSON 中包含成员,并覆盖 parse method 以获取成员输出并转换为相应的集合。