重写Backbone.js的加载动作

最新推荐文章于 2018-09-13 15:29:34 发布

转载最新推荐文章于 2018-09-13 15:29:34 发布 · 846 阅读

CloudServer 专栏收录该内容

219 篇文章

订阅专栏

本文探讨了在Backbone.js中如何解决非JSON数据格式的加载问题，并提供了重写fetch方法的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：http://blog.meathill.net/tech/js/override-loading-logic-in-backbone.html

重写Backbone.js的加载动作

Posted on 三月 13, 2012

居然在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：

1

2

3

 
         //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方法。

话说fetch的重写有种更优化的方法：
fetch: function(options) {
options = options || {};
options.dataType=”xml”;
Backbone.Collection.prototype.fetch.call(this, options);
}

嗯，其实直接传个参数就好了