【问题标题】: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 以获取成员输出并转换为相应的集合。

    【讨论】:

      猜你喜欢
      • 2013-03-31
      • 1970-01-01
      • 2014-04-22
      • 1970-01-01
      • 1970-01-01
      • 2023-03-31
      • 1970-01-01
      • 1970-01-01
      • 2013-01-15
      相关资源
      最近更新 更多