使用 Backbone Collection ，也就是 Backbone 里面的集合的 fetch() 方法，可以从服务端那里，提取出数据的模型，这些模型会自动放到这个集合里面。

下面，我们一起来看一下 ...

首页，需要先去配置一下，让服务端可以返回集合需要的数据。先打开之前我们在 Laravel 里面创建的 Note 这个控制器 ...

在 RESTful 类型的控制器里面，数据的列表，用的是 index 方法返回的，跟这个控制器对应的路由是 api/notes，所以，默认在请求这个地址的时候，就会返回列表数据，也就是笔记模型的列表。

在这个方法里， 可以使用 Note 模型的 all 方法，得到所有的笔记模型。关于 Laravel 的数据相关的操作，你可以参考，宁皓网的 《Laravel 数据库》这个课程。

return Note::all();

保存 ... 下面，我们去试一下 ... 你可以直接在浏览器上打开 api/notes 这个地址 ... 或者，我们可以使用一些 REST 调试工具 .. 这里我用的是 Postman ... 你可以在 Chrome 浏览器的商店里找到这个扩展。

在这里输入要请求的地址 ... http://localhost:8000/api/notes ... 请求的方法选择 GET ... 点一下 Send 发送 ... 在下面，body 这个选项卡里的东西就是返回来的主体内容 ... 这里可以使用 Pretty 的方式预览一下得到的主体内容 ...

得到的就是 JSON 格式的数据 ... 每一小块，都有 id ，title，created_at ，还有 updated_at 这些属性 ...

Backbone

再打开在 Laravel 框架下面的 Backbone ... 打开 app.js ...

想让 Backbone 可以提取服务端的数据到集合里面，我们需要在集合里，指定一下提供这些数据的地址 ...

设置一下 url 属性 ... 属性的值，就是刚才你看到的，返回数据列表的那个地址 ... 也就是 /api/notes 这个地址 ..

url: '/api/notes'

保存 .. 再去浏览器上试试 ...

预览

打开 Backbone 应用的首页 ... 再打开控制台 ... 我们可以先去新建一个集合 ...

var noteCollection = new NoteCollection()

然后，再去调用这个集合的 fetch 方法 .. 因为在 NoteCollection 集合里面，已经定义好了提供数据的地址 ... 执行这个方法，就会使用 Ajax 来发送请求到这个地址上 ...

noteCollection.fetch()

服务端会根据请求返回相应的数据 ... 打开这个返回来的对象 ... 在 responseJSON 这里，你会找到，请求并且返回来的数据对象 ...

我们可以再打开 Network 这个选项卡看一下 ... 点击这个筛选的小图标 ... 然后选择 XHR，只查看 Ajax 的请求...

打开 notes 这个请求 ... 然后点击 Header 这个选项卡 ... 在这里，我们可以看到，这个 Ajax 的请求的地址是 /api/notes ...

Request Method ，请求的方法是 GET ... 再打开 Response 选项卡 ... 这里就是服务端给我们返回来的数据 ...

在 Preview 这里，可以预览一下 ... 返回来的就是 JSON 类型的数据 ...

再回到 Console ...

现在，我们可以先查看一下这个 noteCollection 集合 ...

noteCollection

打开 models 属性 ... 这里，你会看到，在这个集合里面，已经有了三个模型 ... 也就是发送请求，从服务端那里请求回来的数据模型 ...

要得到集合里面的模型 .. 可以使用 get 方法 ... 指定一下模型的 id 号 ...

noteCollection.get(1)

返回的就是 id 号是 1 这个模型 .. 再访问一下它的 attributes 属性 ...

noteCollection.get(1).attributes