1


我是 RequireJS 和 Backbone 的新手，我试图理解为什么 ajax (fetch) 代码不能正常工作。

main.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;
});

问题是：一旦获取集合，就不会调用渲染方法。开发人员工具也没有错误。所以不知道在哪里看。

在此处输入图像描述

任何指针都有帮助。

谢谢病毒

4

3 回答 3

1

当您覆盖主干中的同步方法时，它不会正确触发事件。尝试以这种方式覆盖同步方法

或者，您可以简单地使您的成功函数看起来像骨干源：

success = function(resp) {
    if (success) success(model, resp, options);
    model.trigger('sync', model, resp, options);
};
于 2013-03-01T20:43:25.243 回答
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();
            }
        });

这是fetch来自Backbone 源代码。您可以看到它将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);
},
于 2013-03-01T20:52:59.137 回答
0

保罗的反应很好，但只是想指出以下几点：

当尝试通过覆盖 fetch 的成功函数从您的 ajax 调用中检索数据时，我必须对您的代码进行以下修改：

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

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

    return $.ajax(params);
}

注意行中的区别：

if (success) success(resp);

为了正确地将成功函数传递给响应，这是必需的，否则它会被模型覆盖。现在，在fetch的success函数中，可以输出数据了：

var $this = this;
this.collection.fetch({
    success: function(collection, response, options){
        $this.render(response);
    }
});

这会将 ajax 数据（响应）传递给渲染函数以执行您喜欢的操作。当然，您也可以事先以任何方式操作数据。

理想情况下，我希望能够将数据传递到 collection.models 对象中，就像 Backbone 默认情况下所做的那样。我相信这与数据的解析方式有关，但我还没有弄清楚。如果有人有解决方案，我很想听听 :)

更新：

我已经设法重写了解析函数并以这样一种方式处理来自我的 ajax 调用的 JSON 数据，以便忠实于 Backbone 构造其集合对象的方式。这是代码：

parse: function(resp){
    var _resp = {};
    _resp.results = [];
    _.each(resp, function(model) {
        _resp.results.push(model);
    });
    return _resp.results;
}

这将创建一个新对象，其中包含一个名为results的模型数组，然后将其返回给您的 fetch 函数，允许您直接访问每个模型的属性。

于 2013-05-02T23:36:46.977 回答