1

我使用backbone.boilerplate 创建一个简单的应用程序。

我想创建可以显示网站集合的模块。每个站点都有 id 和 title 属性（例如[{ id: 1, title: "github.com" }, { id: 2, title: "facebook.com" }].

我的路由器：

routes: {
  "": "index",
  "sites": "sites"
},

sites: function () {
  require(['modules/sites'], function (Sites) {
    var layout = new Sites.Views.Layout();
    app.layout.setView('#content', layout);
  });
}

所以，我的网站模块有布局，这样做：

Sites.Views.Layout = Backbone.Layout.extend({
  template: "sites/layout",
  className: 'container-fluid',

  initialize: function () {
    _.bindAll(this);

    this.collection = new Sites.Collections.Sites();
    this.collection.fetch({
      success: this.render
    });
  },

  beforeRender: function () {
    var siteList = new Sites.Views.SiteList({
      collection: this.collection
    });

    this.setView('.content', siteList);
  },
});

Sites.Views.SiteList = Backbone.View.extend({
  template: 'sites/list',

  beforeRender: function () {
    this.collection.each(function (model) {
      var view = new Sites.Views.SiteItem({
        model: model
      });
      this.insertView('tbody', view);
    }, this);
  }
});

Sites.Views.SiteItem = Backbone.View.extend({
  template: 'sites/item',
  tagName: 'tr',

  serialize: function () {
    return {
      title: this.model.get('title')
    };
  }
});

好的。现在我的问题是：当用户单击集合元素时，请帮助我选择呈现一个站点视图的最佳方式。我希望它像 gmail 一样工作：所有字母的一个屏幕和一个字母的所有屏幕（当它选择时）。也许您有类似应用程序示例的链接。我正在等待你的建议。

4

1 回答 1

0

查看您的 pastebin 代码，您似乎对 Backbone 有了基本的了解，这当然是您入门所需的全部内容。

话虽如此，您可能会发现这篇文章/教程很有帮助。<select>它介绍了构建使用 AJAX 更新其值的互连视图（在本教程中它们是相关元素）的过程：

http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/

于 2013-03-27T20:25:39.083 回答