@52fhy 2016-01-22T16:38:53.000000Z 字数 1546 阅读 351

05-backbone集合--与服务器交互

backbone

集合通过fetch方法发送get请求与服务器进行交互。成功后，将会将服务器传来的数据与集合本身合并。

相比Model的fetch方法，集合可以获取更多数据。

可以设置reset:true属性，触发reset。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="lib/jquery-1.10.2.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/backbone.js"></script>
</head>
<body>
<script>
    var book = Backbone.Model.extend({
        initialize: function(){
            //console.log('Hey , you create me!');
        },
        //默认属性
        defaults: {
            title:'well'
        }
    });
    //定义collection
    var books = Backbone.Collection.extend({
        model: book,
    });
    var book1 = new book({title: 'book1'});
    var book2 = new book({title: 'book2'});
    var book3 = new book({title: 'book3'});
    //books实例
    var bookself = new books;
    //books有add方法，添加model
    bookself.add(book1);
    bookself.add(book2);
    bookself.add(book3);
    bookself.each(function(value, key, list){
        //value是每个model
        console.log(value.get('title'));
    });
    console.log(bookself);
    var showAllBooks = function(){
        bookself.each(function(book){
            //将book数据渲染到页面的操作。
            document.writeln(book.get('title'));
        });
    }
    bookself.bind('reset',showAllBooks);
    //给collection添加url属性
    //bookself.url = 'data/collection.json';
    //fetch方法
    //fetch执行之后，发现所有地方的bookself里面的model都动态改变了
    //实际情况下服务器应返回对应的BookShelf的返回格式如下：[{"title":"b1"},{"title":"b2"}]
    bookself.fetch({
        url : 'data/collection.json',
        reset: true, // 需要主动传递reset，才会触发reset。具体含义?
        //相应的第一个参数变为collection
        success:function (collection,res,options) {
             console.log(collection,res,options);
             collection.each(function (model) {
                 console.log(model.get('title'));//b1,b2
             });
        },
        error:function (collection,res,options) {
             console.log(res);
        }
    });
</script>
</body>

collection.json

[{"title":"b1"},{"title":"b2"}]

05-backbone集合--与服务器交互

内容目录