0

我试图围绕 Backbone，更具体地说，应用程序如何在其整个生命周期中流动。不幸的是，在我的工作中，我无法访问（或就此而言）我们的 API 是如何构建的。我们有来自不同时间段的许多不同的调用，它们的结构非常不一致。

覆盖 fetch 或 sync 不是标准化返回的问题，但我遇到的问题（在我开始研究 Backbone 应用程序时）是如何布局实际代码。

这是我在现实世界中的例子。这个页面是非关键的，我正在尝试用 Backbone 重写它。这是流程：

  1. 页面从通话中加载流派类型列表
  2. 单击流派类型会根据流派类型加载子流派（子流派类型需要流派代码作为参数）
  3. 单击子流派类型会加载具有该标准的所有产品。

我可以走得很远，但在某些时候我觉得代码被弄乱了——或者感觉不自然。就像我在推东西一样。

所以我的官方问题是：如何管理 Backbone 应用程序？

以下是我的流程总结：

我应该创建一个全局命名空间

var App = App || {};

好的，让我们从主应用程序视图开始，所有示例都显示：

App.MainView = Backbone.View.extend({
   //this loads the outer stuff
   //and creates an instance of the Genre View
});

好吧，很简单，我需要一个流派模型、集合和视图（这也适用于子流派）

App.Genre = Backbone.Model.extend();

App.Genres = Backbone.Collection.extend({
  url: 'returns a list of genres',
  model: App.Genre,
  initialize: function() {
    this.fetch();
  },
  fetch: function() {
    var self = this;

    $.ajax({
      url: this.url,
      success: function(response) {
        **format return**
        self.add(formattedArrayOfModels);
      }
    });
  }
});

现在来看视图，令人困惑的部分

App.GenreView = Backbone.View.extend({
  el: 'element',//easy enough
  tmpl: 'my handlebars template',//implementing handlebars...no problem
  initialize: function() {
    //this produces a collection full of genres
    this.genreList = new App.Genres();
    this.genreList.on('add', _.bind(this.render, this));
  },
  render: function() {
    //rendering not a problem, pretty straight forward
  }
});

直到这里我没有问题。流派列表加载，我们很高兴。所以，现在当用户点击一个流派时，我希望它加载一个子流派

events: {
  'click a': 'getSubGenres'
},
getSubGenres: function(e) {

}

这是我的问题。在getSubGenres中，我是否将其保留在本地？

var subGenre = new App.SubGenreView();

或者我应该让它成为流派视图的一部分？

this.subGenre = new App.SubGenreView();

我应该以某种方式将它放在父对象中，以便其他视图可以访问它吗？我如何控制这样的事情？

如果我已经有一个子类型的集合，我该如何使用加载的集合（而不是另一个 ajax 调用）。

这是你会使用的方法吗？

4

1 回答 1

1

在我回答之前有几件事，首先： fetch 函数不需要 $ajax 调用，因为它是它的工作，因此，您可以立即在 fetch 内部进行评估error:function(){}，success:function(){}但前提是 URL 设置正确。第二：在我的骨干键盘大战中帮助我很多的一件事是addy osmani Backbone Fundamentals，其中包含一个非常丰富的pdf格式教程。

现在回到问题：根据我的经验，您将主要需要“this”，因此习惯它是一个好习惯，此外，如果正确实施，还有一些东西可以解决很多这些问题：主干布局管理器

无论如何，在哪里放置子视图的决定完全是您的设计决定，并且很大程度上取决于您如何构建页面和文件。

关于如何使用预加载的“集合”：我真的没明白，因为你说的集合包含所有子流派，所以通常即使视图更改为某个流派视图它也不应该改变，您仍然可以使用它。

但是我所说的一切仍然与您构建文件的方式有关，我做了一个 app.js 和一个 router.js 以及许多其他文件，但主要工作总是在主要的两个上，所以基本上我总是可以访问一切。

我希望这回答了你的问题

于 2013-09-26T07:36:05.173 回答