使用 Backbone / Marionette 获取并显示剩余数据答案

【问题标题】：Fetch and display rest data with Backbone / Marionette使用 Backbone / Marionette 获取并显示剩余数据
【发布时间】：2013-12-17 00:22:12
【问题描述】：

我需要一些帮助来从我的服务器获取数据并使用 Marionette 显示它。

在 Angular 中我会这样做：

index.html:

<body ng-app="app" ng-controller="AppCtrl as app">

<ul>
    <li ng-repeat="person in app.people">
        {{person.firstName}} {{person.lastName}}

   </li>
</ul>

app.js：

var app;

app = angular.module("app", []);

app.controller("AppCtrl", function($http) {
  app = this;
  $http.get("http://localhost:3000/people").success(function(data) {
    app.people = data;
  });
});

我的服务器在我的服务器上（快递）：

var people = [
  {
    id: 1,
    firstName: 'Bob',
    lastName: 'Blob',
    phoneNumber: '123'
  }, {
    id: 2,
    firstName: 'Valdemar',
    lastName: 'Ugh',
    phoneNumber: '456'
  }
];

app.get('/people', function(req, res) {
    res.send(people);
    });

现在，我如何使用 Marionette 获得类似的结果？

我有一个模型（在这个例子中使用的是 coffeescript）：

class Person extends Backbone.Model

我也有收藏：

class People extends Backbone.Collection
    model: Person
    url: '/people'

然后我会这样做：

people = new People
people.fetch
    success: ->
        console.log 'works ok'
        return people

    error: (data) ->
        console.log 'no success'

console.log people
view = new Views model: people

我在 console.log 中得到的是：

works ok

People {length: 0, models: Array[0], _byId: Object, constructor: function, model: function…}
_byId: Object
length: 2
models: Array[2]
__proto__: ctor

现在，我的问题是如何使用它？为了简单地列出人，我什至需要这个集合还是只能用模型来做？我将如何 console.log 我列表中所有联系人的名字？为什么它显示 length: 0, models: Array[0] 却有 2 个模型？？

【问题讨论】：

标签： angularjs rest backbone.js marionette

【解决方案1】：

我可以提供的提示是：

您的 JSON 有一个根。像在 Angular 中一样解析数据。

class People extends Backbone.Collection
  # ...
  parse: (data) ->
    data.people

当你想显示集合时，使用 CollectionView 或 CompositeView，而不是 View。并使用集合作为选项，而不是模型。
```
class PeopleView extends Marionette.CollectionView

peopleView = new PeopleView
               collection: people
```

还有很多关于 CollectionView 和集合的知识。您可以阅读文档了解详细信息并自行练习。请耐心等待。

【讨论】：

我尝试了这个解析的东西，但最终我的 fetch 得到的东西更少。它现在说 People {length: 0, models: Array[0], _byId: Object, constructor: function,模型：函数…} _byId：对象长度：0 模型：Array[0] proto：ctor
我实际上只是想在将任何内容应用于我的视图之前获取一些 console.logged，这只是第二步。稍后我将阅读有关 CollectionViews 的更多信息，但现在我只想能够获取一些东西来看看它是否真的有效。
@QlliOlli，您看到people 空白的原因是，您在fetch 之后立即记录了此对象。那个时候，服务器还没有响应，所以集合肯定是空白的。要获得正确的集合以进行调试，请在成功后进行控制台记录。
比 console.log 更好的方法是将其公开为全局对象。 people.fetch(); window.people = people。然后无论成功或错误，您都可以获得有关此对象的完整信息。

【解决方案2】：

这并不是专门为您创建的答案，但请查看此 jsFiddle，它是从 REST api 获取数据并将其显示在 Backbone/Marionette 中的准系统测试 - http://jsfiddle.net/tonicboy/5dMjD/。

您缺少的关键概念是模型事件。在您看来，您应该将处理程序绑定到集合的“重置”事件。获取集合后，此回调将用于然后将数据呈现到您的模板。该集合在您的视图中作为 this.collection.toJSON() 可用。

这是我的 Fiddle 中的等效代码（尽管它是我在学习 Backbone 时使用的旧代码，而不是我今天会怎么做）。我会尝试更新我的 Fiddle 以获得更多“最佳实践”代码。

        myBook.bind('change', function (model, response) {
            var view = new MainView({
                el: $("#main"),
                model: model
            });

            this.region.attachView(view);
            this.region.show(view);
        }, this);

【讨论】：

OP 尚未显示视图。而且此类收集活动在 Marionette 中是原生的，无需自己推出。
我已经在我的回答中明确说过，这是我刚学习 Backbone 时的旧代码，而不是我现在的做法。重点是说明模型和集合事件的概念，以及如何连接它们来控制模板显示。