Backbone.js：在真实应用程序中呈现集合

令人沮丧的是，大多数backbone.js应用程序的“教程”示例都采用了干净的模型。即。在用户添加项之前，模型集合最初为空。当然，在现实世界的应用程序中并非如此，在现实世界中，您通常从后端商店开始使用现有的收藏

我想知道人们如何处理主干网中现有的收藏。具体而言：

• 在对集合进行

  fetch

  ed之后，如何呈现该集合？这只是对集合进行迭代的一种情况吗？这应该由某个事件触发吗

• 主干文档谈到“引导”，我理解这意味着使用初始加载时可用的数据（从SEO的角度来看，这也是有意义的）。但这在实践中是如何起作用的呢？数据被转储到服务器端的JS中？或者JS检查DOM

我觉得这是一个糟糕的问题，但我希望根据答案来扩展它

编辑

所以，似乎大家的共识是将数据添加为JS的一方，并在页面加载时处理这些数据

---

我看到这种技术的一大缺点是搜索引擎爬行器无法获取信息。从这个角度来看，从DOM中提取它可能更好（尽管我还没有看到有人这样做）。或者添加HTML服务器端并将数据粘贴到JS？

至于呈现集合，是的，我通常会迭代集合并为每个模型创建子视图。这里有一个链接可能对这方面有所帮助

什么时候渲染？这是一个很难回答的问题，但我不会说这是对任何特定事件的回应。我喜欢的一件事是，我们有一个主视图，它可以渲染子视图，而其他子视图可以渲染。作为惯例，我们不直接呈现给DOM，但一旦呈现了所有子视图，我们将主视图附加到DOM，整个页面立即显示出来。这避免了“未格式化内容的闪现”

关于引导，我从您阅读的FAQ内容中看到，这正是我在实践中所做的。我使用ASP.Net MVC 3，因此我的服务器端呈现视图将具有如下内容（尽管我通常不会在全局命名空间上放置“books”）：

图书=新图书收藏（）；
books.reset（@Html.ToJson（Model））；

---

希望这会有所帮助。

我遇到了与您相同的情况，我并不总是希望一开始就引导数据（特别是如果数据来自第三方api调用）。我没有遇到过任何这样做的教程，但浏览文档实际上相当容易。您只需要在集合和渲染上绑定“重置”事件（在重新填充整个集合时触发）。下面是一个简单的例子：

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();
  }
};

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);
  }
});

路由器/项目\u router.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();
  }
};

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/items\u 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;
  }
});

---

实际上，我已经在主干网上做了一些工作，我发现在某些情况下，引导数据非常有用，因为您知道一旦页面加载就会需要数据（从而减少额外的AJAX调用）

在Symfony中，我通过以下方式呈现所需的数据来实现：

<script type="text/template" id="__user-boostrap">
    {% echo your data from php or render a controller in symfony or whatever server side script/framework you want %}
    // for example in symfony2, I do:
    {% render "myBundle:Core:getUser" %}
</script>

---

希望这有帮助……

有关主干网引导的更多信息，请参阅官方文档：@rilley-我已经阅读了这些文档。但是谢谢：）我使用ERB或HAML对rubyonrails做了同样的事情