backbone.js – 获取额外数据和请求

我有一个容纳一些用户的集合。 需要的一些信息是总数,页数等等。如何将这些信息传递回客户端? 或者他们必须来自一个单独的视图,在这种情况下,我将需要多个ajax调用? 我想收集fetch()并收到一些“元数据”。 处理这个问题的好方法是什么?

通常,您需要在集合类的parse方法中处理此问题。 它的职责是获取响应并返回一组模型属性。 但是,如果您不希望解析方法承担此额外责任,您可以做更多的事情。

 UserList = Backbone.Collection.extend({ model: User, url: '/users', parse: function(data) { if (!data) { this.registered_users = 0; return []; } this.registered_users = data.registered_users; var users = _(data.users).map( function(user_data) { var user = {}; user['name'] = user_data.name; return user; } ); return users;    } }); 

因此,在上面的简单示例中,假设服务器返回一个响应,其中包含已注册用户的数量和一组用户属性。 您既可以解析并返回用户属性,也可以选择已注册的用户数,并将其设置为模型上的变量。
parse方法将作为fetch的一部分进行调用。 所以不需要修改fetch,只需使用你拥有的内置钩子方法。

纯粹主义者会说你给解析方法一个次要的责任,可能会让一些人感到惊讶(例如,返回一些东西并修改模型状态)。 但是,我认为这没关系。

一种方法是覆盖Collection::fetch()方法,以便从响应中解析出这些元数据。 您可以让后端返回如下响应:

 { "collection": [ { ... model 1 ... }, { ... model 2 ... }, ... ], "total_rows": 98765, "pages": 43 } 

在覆盖原始Backbone.Collection::fetch()方法的Backbone.Collection::fetch()方法中,您可以单独处理对象的每个属性。 您可以使用稍微修改的fetch方法执行覆盖:

 _.extend(Backbone.Collection.prototype, { fetch : function(options) { options || (options = {}); var collection = this; var success = options.success; options.success = function(resp) { // Capture metadata if (resp.total_rows) collection.total_rows = resp.total_rows; if (resp.pages) collection.pages = resp.pages; // Capture actual model data collection[options.add ? 'add' : 'refresh']( collection.parse(resp.collection), options); // Call success callback if necessary if (success) success(collection, resp); }; options.error = wrapError(options.error, collection, options); (this.sync || Backbone.sync).call(this, 'read', this, options); return this; }); 

请注意,使用_.extend这种方法将影响扩展Backbone.Collection 所有类。

这样,您不必对后端进行2次单独调用。

我会在pagecreation上引导信息。 在服务器创建站点时将信息写入html文档。 就像那样你根本不需要ajax调用。 我对ordner中的整个集合执行此操作,不首先加载页面,然后等待ajax调用以返回所需的信息。

Python的代码示例:

第64行: https : //github.com/ichbinadrian/maps/blob/master/python/main.py < - 从这里

第43行: https : //github.com/ichbinadrian/maps/blob/master/templates/index.html < - 到这里