handlebars.js 使用心得(1)

在项目开发中，遇到一个问题，描述如下：

1、展示一个列表；

2、列表每页20个，下拉到底部加载更多；

问题是：

1、如何确定到了底部；

2、如何确定页面已经加载了全部的内容；

问题1

使用了jauery组件lazyload(http://www.appelsiini.net/projects/lazyload)；

问题2

全部数据存储在一个collection中，

var xCollection = Backbone.Collection.extend();

每个数据item是一个model

var xModel = Backbone.Model.extend();

解决方案是：获取collection时，直接返回所有的item和全部的total总数，问题在于，如何处理结果来将结果中的值正确的放到collection中，

返回结果结构：

var xM = {data:[{a:1, b:2}, {a:3, b:4}], total:20};

我采用的是custom collection的set、add、reset方法，测试代码如下：

var xModel = Backbone.Model.extend();
var xCollection = Backbone.Collection.extend({
    model: xModel,
    total: 0,

    set: function(attributes, options) {    

        console.log('set');
        console.log(attributes);
        console.log(options);

        if (attributes.total) {
            this.total = attributes.total;
        }

        if (attributes.data) {
        
            attributes = attributes.data;
        }

        return Backbone.Collection.prototype.set.call(this, attributes, options);
    },

    add: function(attributes, options) {    

        console.log('add');
        console.log(attributes);
        console.log(options);

        if (attributes.total) {
            this.total = attributes.total;
        }

        if (attributes.data) {
        
            attributes = attributes.data;
        }

        return Backbone.Collection.prototype.add.call(this, attributes, options);
    }
});

var xM = {data:[{a:1, b:2}, {a:3, b:4}], total:20};
var xM1 = {data:[{a:5, b:6}, {a:7, b:8}], total:40};
var xC1 = new xCollection();

set测试结果：

xC1.set(xM);

结果是：

set 
Object {data: Array[2], total: 20}
undefined
child {length: 2, models: Array[2], _byId: Object, total: 20, constructor: function…}

add测试结果：

xC1.add(xM1);

结果是：

add 
Object {data: Array[2], total: 40}
undefined 
set
[Object, Object]
Object {add: true, merge: false, remove: false}
child {length: 4, models: Array[4], _byId: Object, total: 40, constructor: function…}