重写Backbone.js的加载动作
2015-07-15 14:16
453 查看
转自:http://blog.meathill.net/tech/js/override-loading-logic-in-backbone.html
居然在Google里找不到类似的情况,难道只有我一个人会有这种疑问么……
我在使用Backbone的时候,遇到一个问题:我需要用Backbone.Model或者Backbone.Collection来加载一些远程数据,一般来说都是静态文件,比如HTML或者XML,既不满足RESTful,也不是JSON;虽然不很符合Backbone的要求,不过因为是静态的,所以我觉得ajax应该都没问题。当我按照这个思路写下去,一般就是这样:
但是运行之后,我发现被覆盖的parse没有执行。然而查看网络,目标文件已经被正常加载。作为Backbone的初学者,也不知道问题出在哪里。不得已找来源码跟踪,发现Backbone实现fetch是委托给Backbone.sync方法,但是在实现的时候会把数据格式设置为json:
而jQuery 1.4版之后,会对返回的数据格式进行验证,如果不符合就抛出异常。所以当我那些不是JSON的数据加载完毕后,jQuery就会进入异常处理阶段,而非正常的对返回数据进行处理。于是覆盖的parse也就不执行了。
如果远程数据不是JSON,需要覆盖数据加载逻辑时,就应该覆盖fetch方法,比如这样:
不过我不太喜欢范例里那样重写sync的作法,因为在实际应用时,不同的Model和Collection可能要提供加载远程数据、加载模板、与LocalStorage交互等不同的功能,重写sync也很难满足需要。所以不妨直接在不同的类里面覆盖各自的fetch、save方法。
居然在Google里找不到类似的情况,难道只有我一个人会有这种疑问么……
我在使用Backbone的时候,遇到一个问题:我需要用Backbone.Model或者Backbone.Collection来加载一些远程数据,一般来说都是静态文件,比如HTML或者XML,既不满足RESTful,也不是JSON;虽然不很符合Backbone的要求,不过因为是静态的,所以我觉得ajax应该都没问题。当我按照这个思路写下去,一般就是这样:
var MyModelClass = Backbone.Model.extend({ url: 'config.xml', parse: function (response) { console.log(response); } }); var model = new MyModelClass(); model.fetch();
但是运行之后,我发现被覆盖的parse没有执行。然而查看网络,目标文件已经被正常加载。作为Backbone的初学者,也不知道问题出在哪里。不得已找来源码跟踪,发现Backbone实现fetch是委托给Backbone.sync方法,但是在实现的时候会把数据格式设置为json:
// http://documentcloud.github.com/backbone/backbone.js // Default JSON-request options. var params = {type: type, dataType: 'json'};
而jQuery 1.4版之后,会对返回的数据格式进行验证,如果不符合就抛出异常。所以当我那些不是JSON的数据加载完毕后,jQuery就会进入异常处理阶段,而非正常的对返回数据进行处理。于是覆盖的parse也就不执行了。
如果远程数据不是JSON,需要覆盖数据加载逻辑时,就应该覆盖fetch方法,比如这样:
var MyModelClass = Backbone.Model.extend({ url: 'config.xml', fetch: function () { $.ajax({ url: this.url, context: this, success: this.parse }); } parse: function (response) { console.log(response); } }); var model = new MyModelClass(); model.fecth();
不过我不太喜欢范例里那样重写sync的作法,因为在实际应用时,不同的Model和Collection可能要提供加载远程数据、加载模板、与LocalStorage交互等不同的功能,重写sync也很难满足需要。所以不妨直接在不同的类里面覆盖各自的fetch、save方法。
相关文章推荐
- BZOJ 1015 [JSOI2008]星球大战starwar
- 判断页面是关闭还是刷新的js代码
- js调用cs中函数的方法及在cs中调用js函数
- JSP通用7动作命令
- jsp中的js嵌入Extjs与后台action交互
- json.dumps loads 终于区分出来了
- md5 jsp页面,加密用
- jsp内置对象 的使用范围和类型【说明】
- JavaScript高级程序设计【面向对象-创建对象】
- 页面自动执行(加载)js的几种方法
- js的二维数组
- Javascript简单改变表单元素背景的方法
- 求帮看!!!!BZOJ 1014 [JSOI2008]火星人prefix
- js原生弹出框
- js原生贪吃蛇游戏
- 从网址获取json字符串
- 跨域请求问题以及相关解决方法之JSONP
- js身份证有效验证
- JSTL标签库基础教程
- JavaScript实现对下拉列表值进行排序的方法