Лучший способ реализовать приложение списка магистралей

Question

Я использую 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: один экран для всех букв и весь экран для одной буквы, когда он был выбран. Может быть, у вас есть ссылка с примером подобного приложения. Я жду ваших советов.

Answer 1

Глядя на ваш код для вставки, кажется, что у вас есть базовое понимание Backbone, и это, безусловно, все, что вам нужно для начала.

При этом, вы можете найти эту статью / учебник полезным. Он проходит через процесс построения взаимосвязанных представлений (в учебнике они связаны <select> элементы), которые используют AJAX для обновления своих значений:

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