下面，我们到浏览器上去试一下 ... 在浏览器里边儿直接打开应用的主页 ... index.html ...

然后打开浏览器的控制台 ... alt + command + J

在控制台上，先查看一下 app.todoList 这个集合里面的东西 ...

app.todoList

在返回的结果里面，你会发现， length 属性的值是 0 ，这就表示在这个集合里面，还没有任何的模型 ... length 这个属性通常会表示长度，或者数量 ...

下面，我们用 Backbone 集合里面的 create 这个方法，去创建一个模型 ... 这个方法可以把创建的模型直接添加到集合里面，并且 会向指定的服务端的地址发出请求来存储创建的模型。不过在我们的应用的集合里面，用了 Backbone 的 localStorage ，所以，会把模型存储到浏览器的 localStorage 里面。

app.todoList.create({title: '发布新的课程'})

再查看一下这个集合 ...

app.todoList

这回你会发现，表示任务列表的这个集合的 length 属性的值，现在是 1，说明它里面已经有了一个模型了 ... 也就是刚才我们用 create 方法创建的那个模型 ...

然后再打开 Resources ... 找到 Local Storage ... 打开存储在 file:// 这个路径下面的 Local Storage ... 因为这里我们是直接在文件系统里打开的这个应用的主页 ...

在这里，你会发现，刚才创建的那个任务模型 ...

这条数据的 Key 是用 todo 开头的 ... 后面是一串随机的字符串 ...

数据的 Value ，也就是数据的值 ... 是一个 JSON 类型的数据 ... 在这里，你会发现它的 title 属性的值是，发布新的课程 ...

任务的 completed 这个属性的值是默认的 false ... 另外，Backbone 的 localStorage 这个插件会在存储的数据里面，自动加上一个 id 属性 ...

再回到 console ...

我们可以刷新一下页面 ... command + R ... windows 上应该是 ctrl + R ...

然后再查看一下 app.todoList ... 现在它里面已经没有东西了 ...

下面， 我们可以使用集合的 fetch 这个方法，从数据源哪里提取出模型数据 ... 默认是从指定的地址里面去提取数据 ... 因为这里我们用到了 Backbone 的 localStorage ... 所以会从浏览器的 Local Storage 里面提取数据 ...

app.todoList.fetch()

再查看一下 ...

app.todoList

这次集合里又有数据了 ... 是从 Local Storage 里面提供出来的 ...

用 at 方法，可以查看在集合里面指定索引号的模型 .. . 0 表示第一个模型 ... 后面再加上一个 attributes 属性 .. 可以得到这个模型的属性 ...

app.todoList.at(0).attributes

调用模型的 destroy 方法，可以销毁这个模型 ...

app.todoList.at(0).destroy()

再查看一下集合 ...

app.todoList

length 属性的值是 0 ，表示集合里已经没有模型了 ...

再打开 Resources 选项卡 ... Local Storage

在这里，之前存放的那个模型，也已经被删除掉了。