重写Backbone.js的加载动作

转自：http://blog.meathill.net/tech/js/override-loading-logic-in-backbone.html

居然在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方法。