[英]Backbone.js - Pass variable from route to view/collection/model
So I'm building a mobile website and I have a directory called 'api' with various php files hat echo JSON formatted data from a remote API. 因此,我正在构建一个移动网站,并且有一个名为“ api”的目录,其中包含各种php文件,它们从远程API回显JSON格式的数据。 I did this to avoid the cross-domain issue.
我这样做是为了避免跨域问题。
But one of the php files needs a GET parameter (ie id) so that I can echo the JSON data for a specific object based on it's id. 但是其中一个php文件需要一个GET参数(即id),以便我可以根据其id响应特定对象的JSON数据。
My collection will need to do this (assuming this will work): 我的收藏需要这样做(假设这可以工作):
define([
'backbone',
'models/tournaments/single'
], function(Backbone, singleModel) {
var TournamentCollection = Backbone.Collection.extend({
model: singleModel,
url: '/api/tournament.php?id=' + id,
parse: function(response) {
return response;
}
});
return TournamentCollection;
});
I have this in my router, but how do I pass the 'id' value to the view or collection: 我在路由器中有这个,但是如何将'id'值传递给视图或集合:
define([
'jquery',
'underscore',
'backbone',
'views/home',
'views/tournament'
], function($, _, Backbone, HomeView, TournamentView) {
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'tournament/:id': 'tournament'
}
});
var initialize = function() {
var app_router = new AppRouter;
app_router.on('route:home', function() {
var homeView = new HomeView();
});
app_router.on('route:tournament', function(id) {
var tournamentView = new TournamentView({id: id});
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
Couple of things: 几件事情:
1) Your definition of the url property of the collection will not work as id is likely not defined when defining the TournamentCollection class. 1)您对集合的url属性的定义将不起作用,因为在定义TournamentCollection类时可能未定义id。 You can use a function rather than a property.
您可以使用函数而不是属性。 TournamentCollection will become something like this:
TournamentCollection将变成这样:
define([
'backbone',
'models/tournaments/single'
], function(Backbone, singleModel) {
var TournamentCollection = Backbone.Collection.extend({
model: singleModel,
initialize: function (options) {
this.id = options.id;
},
url: function () {
return '/api/tournament.php?id=' + this.id
},
parse: function(response) {
return response;
}
});
return TournamentCollection;
});
This way you can initialize the object with an id, and later, when the url is fetched it will include the correct id. 这样,您可以使用id初始化对象,稍后,当获取url时,它将包含正确的id。
2) I would probably initialize and fetch the collection from the router. 2)我可能会初始化并从路由器获取集合。 Then from the initialize of the view, listen for that fetch to complete and ultimately re-render the view.
然后从视图的初始化开始,侦听该提取操作以完成并最终重新渲染视图。 Something like this:
像这样:
define([
'jquery',
'underscore',
'backbone',
'views/home',
'views/tournament'
], function($, _, Backbone, HomeView, TournamentView) {
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'tournament/:id': 'tournament'
}
});
var initialize = function() {
var app_router = new AppRouter;
app_router.on('route:home', function() {
var homeView = new HomeView();
});
app_router.on('route:tournament', function(id) {
var tournaments = new TournamentCollection({ id: id });
tournaments.fetch();
var tournamentView = new TournamentView({ collection: tournaments });
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
// Tournament View define stuff
var TournamentView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.collection, 'sync', this.render);
},
render: function () {
//...
}
});
return TournamentView
hope that helps. 希望能有所帮助。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.