Question

我需要一些帮助才能从我的服务器获取数据并使用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中列出我列表中所有联系人的名字？为什么它显示长度：0，模型：数组[0]但还有2个模型??

Answer 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和集合，还有很多事情需要了解。您可以自己阅读文档以获取详细信息和练习。请耐心等待。

Answer 2

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

您缺少的关键概念是模型事件。在您的视图中，您应该将处理程序绑定到集合的“重置”事件。获取集合时，将使用此回调将数据呈现给模板。该集合可从您的视图中以this.collection.toJSON（）。

的形式获得

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

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

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

使用Backbone / Marionette获取并显示休息数据

2 个答案: