Javascript jQuery Mobile,需要JS和主干REST收集示例
我在使用主干网、RequireJS方法和jQuery Mobile相结合方面是个新手。在官方的演示页面上,他们正在解析文件CategoriesCollection.js中的一个json数组示例。我想使用REST将此更改为现实世界的示例,我不知道如何实现这一点 CategoreCollection.js代码如下:Javascript jQuery Mobile,需要JS和主干REST收集示例,javascript,jquery,json,jquery-mobile,backbone.js,Javascript,Jquery,Json,Jquery Mobile,Backbone.js,我在使用主干网、RequireJS方法和jQuery Mobile相结合方面是个新手。在官方的演示页面上,他们正在解析文件CategoriesCollection.js中的一个json数组示例。我想使用REST将此更改为现实世界的示例,我不知道如何实现这一点 CategoreCollection.js代码如下: // Category Collection // =================== // Includes file dependencies define([ "jq
// Category Collection
// ===================
// Includes file dependencies
define([
"jquery",
"backbone",
"../models/CategoryModel" ], function( $, Backbone, CategoryModel ) {
// Extends Backbone.Router
var Collection = Backbone.Collection.extend( {
// The Collection constructor
initialize: function( models, options ) {
// Sets the type instance property (ie. animals)
this.type = options.type;
},
// Sets the Collection model property to be a Category Model
model: CategoryModel,
// Sample JSON data that in a real app will most likely come from a REST web service
jsonArray: [
{ "category": "animals", "type": "Pets" },
{ "category": "animals", "type": "Farm Animals" },
{ "category": "animals", "type": "Wild Animals" },
{ "category": "colors", "type": "Blue" },
{ "category": "colors", "type": "Green" },
{ "category": "colors", "type": "Orange" },
{ "category": "colors", "type": "Purple" },
{ "category": "colors", "type": "Red" },
{ "category": "colors", "type": "Yellow" },
{ "category": "colors", "type": "Violet" },
{ "category": "vehicles", "type": "Cars" },
{ "category": "vehicles", "type": "Planes" },
{ "category": "vehicles", "type": "Construction" }
],
// Overriding the Backbone.sync method (the Backbone.fetch method calls the sync method when trying to fetch data)
sync: function( method, model, options ) {
// Local Variables
// ===============
// Instantiates an empty array
var categories = [],
// Stores the this context in the self variable
self = this,
// Creates a jQuery Deferred Object
deferred = $.Deferred();
// Uses a setTimeout to mimic a real world application that retrieves data asynchronously
setTimeout( function() {
// Filters the above sample JSON data to return an array of only the correct category type
categories = _.filter( self.jsonArray, function( row ) {
return row.category === self.type;
} );
// Calls the options.success method and passes an array of objects (Internally saves these objects as models to the current collection)
options.success( categories );
// Triggers the custom `added` method (which the Category View listens for)
self.trigger( "added" );
// Resolves the deferred object (this triggers the changePage method inside of the Category Router)
deferred.resolve();
}, 1000);
// Returns the deferred object
return deferred;
}
} );
// Returns the Model class
return Collection;
} );
请解释您希望实现什么样的“真实世界示例”。这是一个不好的示例,它们正在覆盖同步以提供本地对象-这不是一个好方法,通过谷歌搜索“mock api”或工具“mockjax”将揭示更好的方法。主干网本质上是处理实时数据的,他们通过覆盖同步来破坏它。任何关于模型主题的主干图坦卡门都会向你展示这一点。至于理想的设置,这是一个棘手的问题。我推荐我同事的首次回购-。至少我会扩展视图以支持子视图和多重继承的扩展方法。我只需要看看集合本身的逻辑如何,因为主干教程没有与RequireJS和jQuery Mobile结合的示例。因此,简而言之,在上面提供的示例中,我只需要看看如何通过REST检索JSON。