Backbone/Marionette 将视图与获取数据分离

Question

我的申请中有 "list of projects"。每个项目都有名称、描述和成员列表（姓名+姓氏）。

看来我必须获取项目列表（名称、描述等）并为每个项目获取成员列表。这意味着我有一些视图级别，每个级别获取集合并创建另一个 views/sub-views.

的实例

所有集合都在视图初始化方法中获取并从 REST 服务异步加载。

这意味着我无法确定 ListOfProjectView 何时准备就绪（因为有子视图）并且我遇到了另一个问题...

问题 - 如何正确使用视图？
1）如果我在视图中获取数据是正常的还是我应该将完整的数据传递给视图？
2) 在另一个视图中创建视图实例是否正确？

Answer 1

如果您使用的是 Marionette（您应该是），那么您的描述如下：

ListOfProjects其中是一个CompositeView（或CollectionView），其中itemView（childView）是一个Project，它本身是一个CompositeView，其中itemView是一个Member。

Marionette 将在数据可用时呈现视图，因此假设您有一个普通的 REST api，它将执行以下请求：

/projects
/projects/1/members
/projects/2/members 
...
/projects/N/members

项目列表将在第一个请求完成后呈现，每个项目的成员将在获取集合后立即呈现。

如果你想优化网络请求的数量（如果项目数量很大），那么你可能希望在每个项目的 JSON 中包含成员，并覆盖 parse method为了把成员取出来，转换成对应的集合。

Answer 2

在 initialize 上获取模型会强制您获取 async，否则您会运行出现竞争条件，在您呈现视图时集合将为空。

我通常会在实例化视图之前实例化我的集合并获取其模型。我通过利用 Promises 来处理实际的事件顺序。默认情况下 Backbone 同步将实现 $.ajax()。当您进行抓取时，抓取将 return 一个 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);

关于您的第二个问题，如果子视图是视图层次结构的一部分，则在视图内处理视图没有任何问题。这不是唯一的方法。但这很有意义，总的来说，我运行没有遇到任何问题。

Backbone/Marionette 将视图与获取数据分离

Backbone/Marionette decouple views from getting data

javascript

backbone.js

marionette

fetch