handlebars.js 使用心得(1)

来源：互联网发布：狗万万博软件编辑：程序博客网时间：2024/05/17 18:14

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

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}undefinedchild {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…}

0 0