Backbone.js:在真实世界的应用程序中渲染集合

Question

令人沮丧的是,backbone.js应用程序的大多数"教程"示例都假定了一个干净的模型.I-.E.最初模型集合为空,直到用户添加项目.当然,在现实世界的应用程序中情况并非如此,您通常会从后端存储开始使用现有的集合.

我想知道人们如何处理骨干网中的现有馆藏.特别:

• 如何在fetch编辑后渲染集合？只是一个迭代整个集合的情况？这应该是某些事件引发的吗？

• 骨干文档谈论'bootstrapping',我理解这意味着使用初始加载时可用的数据(从SEO的角度来看这也是有意义的).但这在实践中如何运作？数据被转储到服务器端的JS中？或者JS检查DOM？

我觉得这是一个很糟糕的问题,但我希望根据答案进行扩展.

编辑

因此,似乎共识是将数据添加为JS的一方并在页面加载时处理该数据.

我用这种技术看到的一个很大的缺点是信息不适用于搜索引擎蜘蛛.从这个角度来看,从DOM中提取它可能会更好(尽管我没有看到有人这样做).或者可能添加HTML服务器端并将数据粘贴到JS中？

Answer 1

我遇到了与你相同的情况,我并不总是希望我的数据最初被引导(特别是如果它来自第三方api调用).我没有遇到任何这样做的教程,但通过文档查看它实际上非常简单.您只需要在集合和渲染上绑定'reset'事件(在重新填充整个集合时触发).下面是一个简单的例子:

my_application.js

window.MyApplication = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {},
  init: function() {
    // Start the data loading
    this.someItems = new MyApplication.Collections.Items();
    this.someItems.fetch();

    // Start rendering the UI before the data is ready
    new MyApplication.Routers.Items(this.someItems);
    Backbone.history.start();
  }
};

路由器/ items_router.js

MyApplication.Routers.Items = Backbone.Router.extend({
  routes: {
    "" : "index"
  },

  initialize: function(collection) {
    this.collection = collection;
  },

  index: function() {
    var view = new MyApplication.Views.ItemsIndex({ collection: this.collection });
    $('.items').html(view.render().el);
  }
});

意见/项目/ items_index.js

MyApplication.Views.ItemsIndex = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, "render");

    // Once the collection is fetched re-render the view
    this.collection.bind("reset", this.render);
  },

  render: function() {
    console.log(this.collection.length);
    // Render content
    return this;
  }
});

Answer 2

就渲染集合而言,是的,我通常迭代集合并为每个模型创建子视图.这是一个可能有用的链接 http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

你什么时候渲染它？嗯,这是一个很难回答,但我不会说这是对任何特定事件的回应.我喜欢的一件事是我们有一个主视图渲染子视图,渲染其他子视图.作为约定,我们不直接呈现给DOM,但是一旦呈现所有子视图,我们将主视图附加到DOM并且整个页面立即显示.这避免了"无格式内容的闪现"

关于自举,我从你阅读常见问题的内容中看到,这就是我在实践中所做的.我使用ASP.Net MVC 3,所以我的服务器端渲染视图会有类似的东西(虽然我不会把'书'放在全局命名空间上):

<script type="text/javascript">
    books = new BooksCollection();
    books.reset(@Html.ToJson(Model));
</script>

希望这很有帮助.