如何在 Backbone.Collection 中传递变量而不是 url
How to pass variable instead of url in Backbone.Collection
我尝试在不使用 url
的情况下将我的数据传递到 Backbone.Collection
。我只有一个对象数组的响应,我需要的是将一个变量传递给 url
。但是 url
是工作目录中到 json 文件或 url 到服务器的路径。那么我怎样才能传递我的变量而不是 url?
var test = [{
"name": "Afghanistan",
"url": "http://en.wikipedia.org/wiki/Afghanistan",
"pop": 25500100,
"date": "2013-01-01",
"percentage": 0.36,
"id": 1
}, {
"name": "Albania",
"url": "http://en.wikipedia.org/wiki/Albania",
"pop": 2831741,
"date": "2011-10-01",
"percentage": 0.04,
"id": 2
}];
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: "scripts/test.json" // there should be pass to my variable "test"
});
您可以覆盖fetch
方法并将数据设置到这个方法中。
var testMocks = [/* ... */];
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: testMocks, // there should be pass to my variable "test"
fetch: function(options) {
var options = options || {};
var response = this.url;
// Do the same as the fetch method does when the data received
this.set(this.parse(response, options), options);
if (typeof options.success === 'function') {
options.success(this, response, options);
}
// Returns deferred as the original fetch
return Backbone.$.Deferred().resolve();
},
});
// ...
var collection = new Territories();
collection.fetch();
console.log(collection.length); // 2
console.log(collection.first().get('name')); // "Afghanistan"
如果你也想使用 save/destroy 方法(例如测试),你可以使用 sinon fake server.
您可以使用 initialize: 函数。你可以这样做。
var Territories = Backbone.Collection.extend({
model: Territory,
initialize: function(options) {
this.id = options.id;
this.url = options.url;
},
url: function(){
return this.url+'/'+this.id;
}
});
var collection = new Territories({id: 125, url: 'http://anything.somthing'})
collection.fetch();
您需要阅读更多 backbone 文档。 http://backbonejs.org/
正如 在评论中暗示的那样,如果您想从值数组而不是 URL 初始化集合,您只需将值数组传递给集合的构造函数即可。这些值应该传达与集合期望从服务器获得的 JSON 相同的结构。
根据你的代码,我只需要添加:
var territories = new Territories(test);
console.log(territories.at(0).attributes);
console.log(territories.at(1).attributes);
这里有一段说明。当你 运行 它时,你会在控制台上看到存储在集合中的第一个和第二个模型的属性。
var test = [{
"name": "Afghanistan",
"url": "http://en.wikipedia.org/wiki/Afghanistan",
"pop": 25500100,
"date": "2013-01-01",
"percentage": 0.36,
"id": 1
}, {
"name": "Albania",
"url": "http://en.wikipedia.org/wiki/Albania",
"pop": 2831741,
"date": "2011-10-01",
"percentage": 0.04,
"id": 2
}];
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: "scripts/test.json" // there should be pass to my variable "test"
});
var territories = new Territories(test);
console.log(territories.at(0).attributes);
console.log(territories.at(1).attributes);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
我尝试在不使用 url
的情况下将我的数据传递到 Backbone.Collection
。我只有一个对象数组的响应,我需要的是将一个变量传递给 url
。但是 url
是工作目录中到 json 文件或 url 到服务器的路径。那么我怎样才能传递我的变量而不是 url?
var test = [{
"name": "Afghanistan",
"url": "http://en.wikipedia.org/wiki/Afghanistan",
"pop": 25500100,
"date": "2013-01-01",
"percentage": 0.36,
"id": 1
}, {
"name": "Albania",
"url": "http://en.wikipedia.org/wiki/Albania",
"pop": 2831741,
"date": "2011-10-01",
"percentage": 0.04,
"id": 2
}];
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: "scripts/test.json" // there should be pass to my variable "test"
});
您可以覆盖fetch
方法并将数据设置到这个方法中。
var testMocks = [/* ... */];
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: testMocks, // there should be pass to my variable "test"
fetch: function(options) {
var options = options || {};
var response = this.url;
// Do the same as the fetch method does when the data received
this.set(this.parse(response, options), options);
if (typeof options.success === 'function') {
options.success(this, response, options);
}
// Returns deferred as the original fetch
return Backbone.$.Deferred().resolve();
},
});
// ...
var collection = new Territories();
collection.fetch();
console.log(collection.length); // 2
console.log(collection.first().get('name')); // "Afghanistan"
如果你也想使用 save/destroy 方法(例如测试),你可以使用 sinon fake server.
您可以使用 initialize: 函数。你可以这样做。
var Territories = Backbone.Collection.extend({
model: Territory,
initialize: function(options) {
this.id = options.id;
this.url = options.url;
},
url: function(){
return this.url+'/'+this.id;
}
});
var collection = new Territories({id: 125, url: 'http://anything.somthing'})
collection.fetch();
您需要阅读更多 backbone 文档。 http://backbonejs.org/
正如
根据你的代码,我只需要添加:
var territories = new Territories(test);
console.log(territories.at(0).attributes);
console.log(territories.at(1).attributes);
这里有一段说明。当你 运行 它时,你会在控制台上看到存储在集合中的第一个和第二个模型的属性。
var test = [{
"name": "Afghanistan",
"url": "http://en.wikipedia.org/wiki/Afghanistan",
"pop": 25500100,
"date": "2013-01-01",
"percentage": 0.36,
"id": 1
}, {
"name": "Albania",
"url": "http://en.wikipedia.org/wiki/Albania",
"pop": 2831741,
"date": "2011-10-01",
"percentage": 0.04,
"id": 2
}];
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: "scripts/test.json" // there should be pass to my variable "test"
});
var territories = new Territories(test);
console.log(territories.at(0).attributes);
console.log(territories.at(1).attributes);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>