javascript - RequireJS 和 Backbone ajax 问题

Question

我是 RequireJS 和 Backbone 的新手，并且试图理解为什么 ajax(获取)代码无法正常工作。

主.js

require.config({
shim: {
    'backbone': {
        deps:['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    }
},
paths: {
    'jquery': 'vendor/jquery/jquery',
    'underscore': 'vendor/underscore/underscore',
    'backbone': 'vendor/backbone/backbone'
}
});
require(['views/appViews'], function(AppView) {
 new AppView();
});

AppView.js

define(['jquery', 'underscore','backbone', '../collections/appCollections'], function($, _, Backbone, AppCollections) {
    var App = Backbone.View.extend({
        initialize: function() {
            _.bindAll( this, "render" );

            this.collection = new AppCollections;

            var $this = this;

            this.collection.bind("all", this.render, this);
            var x = this.collection.fetch();
            /*
             * This was not working
            this.collection.fetch({
                success: function() {
                    $this.render();
                }
            });
            */
        },

        template: _.template( $('#tweetsTemplate').html() ),

        render: function() {
            console.log(this.collection.toJSON());
            //$(this.el).html(this.template({ tweets: this.collection.toJSON() }));
        }   
      });
      return App;
     });

AppCollections.js

define(['jquery','underscore','backbone','../models/appModels'], function($, _, Backbone, AppModel) {
 var AppCollection = Backbone.Collection.extend({

model: AppModel,

url: 'http://search.twitter.com/search.json?q=dog',

parse: function ( response, xhr ) {
        return response.results;
},
// Overwrite the sync method to pass over the Same Origin Policy
sync: function (method, model) {
    var $this = this;
    var params = _.extend({
        type: 'GET',
        dataType: 'jsonp',
        url: $this.url,
        processData: false
    }   );

    return $.ajax(params);
}

 });
 return  AppCollection;
});

应用模型

define(['underscore', 'backbone'], function(_, Backbone) {
var AppModel = Backbone.Model.extend({});
return AppModel;
});

问题是:提取集合后不会调用 render 方法。开发者工具也没有错误。所以不确定去哪里找。

任何指针都是有帮助的。

谢谢 病毒式

Answer 1

未调用成功回调，因为您的 sync 方法未将其传递给 ajax。

sync的第三个参数是options对象，里面有成功回调。

sync: function (method, model, options) {
    var $this = this;

    var success = options.success;
    options.success = function(resp) {
      if (success) success(model, resp, options);
      model.trigger('sync', model, resp, options);
    };
    var params = _.extend({
        type: 'GET',
        dataType: 'jsonp',
        url: $this.url,
        processData: false
    }, options);

    return $.ajax(params);
}

这样，ajax 将正确调用 Backbone Collection 的 fetch 中定义的成功回调，后者又会调用您传递给 fetch 的成功回调。

然后获取:

        this.collection.fetch({
            success: function() {
                $this.render();
            }
        });

这是从 Backbone source 中获取 .您可以看到它将 success 回调传递给 sync。

fetch: function(options) {
  options = options ? _.clone(options) : {};
  if (options.parse === void 0) options.parse = true;
  var success = options.success;
  options.success = function(collection, resp, options) {
    var method = options.update ? 'update' : 'reset';
    collection[method](resp, options);
    if (success) success(collection, resp, options);
  };
  return this.sync('read', this, options);
},