骨干传递模型路由器 [英] Backbone passing a model to Router
本文介绍了骨干传递模型路由器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在开发Android需要使用js和骨干网的应用程序。我必须通过通过touchend事件从集合取到路由器的典范。我该怎么办呢？
定义（[jQuery的，下划线，脊梁，把手，意见/ CinemaView，模型/ CineDati，文！模板/ listacinema。 HTML]，功能（$，_，骨干，车把，CinemaView，CineDati，模板）{
VAR ListaCinemaView = Backbone.View.extend（{
模板：Handlebars.compile（模板），
事件：{
touchend：详细信息
}，
初始化：功能（）{
VAR自我=这一点;
$阿贾克斯（{
网址：'http://www.cineworld.com/api/quickbook/cinemas'，
输入：GET，
数据：{关键：BwKR7b2D}，
数据类型：'JSONP'，//设置该数据类型将添加回调参数为你
成功：函数（响应状态）{
//检查从服务器错误
如果（response.errors）{
$。每个（response.errors，函数（）{
（出现错误，请重试。）警告;
}）;
}其他{ $。每个（response.cinemas，函数（）{
VAR电影=新CineDati（）;
cinema.set（{ID：this.id，名称：this.name，cinema_url：this.cinema_url，地址：this.address，岗位code：this.post code，电话：this.telephone}） ;
self.model.add（[电影]）; }）;
self.render（）;
}}
}）;
}， 事件：{
#touchend：Dettagli
}， 渲染：功能（）{
$（this.el）.empty（）; $（this.el）的.html（模板）.append（
_.each（this.model.models，功能（电影）{
$（＃LISTA）。追加（新CinemaView（{
型号：电影
}）渲染（）EL）。 }， 这个））; 返回此;
}， Dettagli：功能（）{ Backbone.history.navigate（this.model，{触发：真正的}）;
}
}）;
返回ListaCinemaView;}）;
解决方案
您需要重写骨干的导航功能如下：
\r
\r\r
\r VAR路由器= Backbone.Router.extend（{\r
routeParams：{}，\r
路线：{\r
家：onHomeRoute\r
}，\r
/ *\r
*覆盖导航功能\r
* @参数{string}里航线该航线哈希\r
* @参数{} PlainObject选项选项导航功能。\r
*您可以发送一个额外的属性PARAMS你传递参数如下：\r
* {\r
* params：一个数据\r
*}\r
** /\r
导航：功能（路线选项）{\r
VAR routeOption = {\r
触发：真\r
}，\r
PARAMS =（选项和放大器;＆安培; options.params）？ options.params：空;\r
$ .extend（routeOption，期权）;\r
删除routeOption.params;\r
\r
//把params的路线\r
this.param（路线，则params）;\r
Backbone.Router.prototype.navigate（路线，routeOption）;\r
}，\r
\r
/ *\r
*获取或路线片段设置参数\r
* @参数{string}里的片段精确路线哈希值。例如：\r
*如果你有路线的'资料/：身份证'，然后让设置参数\r
*您需要发送该片段的个人资料/ 1或个人资料/ 2'\r
* @参数{任何类型} PARAMS你的路线设置的参数\r
* @该参数返回参数值。\r
** /\r
参数：函数（片段，则params）{\r
VAR matchedRoute;\r
_.any（Backbone.history.handlers，功能（处理）{\r
如果（handler.route.test（片段））{\r
matchedRoute = handler.route;\r
}\r
}）;\r
如果（PARAMS！==未定义）{\r
this.routeParams [片段] =参数;\r
}\r
\r
返回this.routeParams [片段]\r
}，\r
\r
/ *\r
*当调用哈希变为家庭路线\r
** /\r
onHomeRoute：功能（）{\r
的console.log（参数=，this.param（家））;\r
}\r
\r
}） \r
在这里，我已经写了一个自定义函数参数做你想要发送的get / set的参数。
现在发送自定义参数，您可以把它像下面这样：
\r
\r\r
\r VAR路由器=新路由器（）;\r
Backbone.history.start（{}）;\r
router.navigate（家，{\r
PARAMS：'你的数据'\r
}）; \r
要检索获取数据的数据回调函数里面你可以写code是这样的：
\r
\r\r
\r this.param（家）; //这将返回在调用浏览功能，否则将返回null设置参数 \r
I'm developing an application for android using require js and Backbone. I have to pass a model taken from a collection via touchend event to the router. How can I do it?
define(["jquery", "underscore","backbone","handlebars", "views/CinemaView", "models/CineDati", "text!templates/listacinema.html"],
function($,_,Backbone,Handlebars,CinemaView, CineDati, template){
var ListaCinemaView = Backbone.View.extend({
template: Handlebars.compile(template),
events: {
"touchend" : "Details"
},
initialize : function (){
var self = this;
$.ajax({
url: 'http://www.cineworld.com/api/quickbook/cinemas',
type: 'GET',
data: {key: 'BwKR7b2D'},
dataType: 'jsonp', // Setting this data type will add the callback parameter for you
success: function (response, status) {
// Check for errors from the server
if (response.errors) {
$.each(response.errors, function() {
alert('An error occurred. Please Try Again');
});
} else {
$.each(response.cinemas, function() {
var cinema = new CineDati();
cinema.set({ id : this.id, name : this.name , cinema_url : this.cinema_url, address: this.address, postcode : this.postcode , telephone : this.telephone });
self.model.add([cinema]);
});
self.render();
}}
});
},
events : {
"#touchend" : Dettagli
},
render : function(){
$(this.el).empty();
$(this.el).html(template).append(
_.each(this.model.models, function (cinema) {
$("#lista").append(new CinemaView({
model: cinema
}).render().el); }, this));
return this;
},
Dettagli : function(){
Backbone.history.navigate( this.model , {trigger: "true"});
}
});
return ListaCinemaView;
});
解决方案
You need to override the Backbone's navigate function as following:
var Router = Backbone.Router.extend({
routeParams: {},
routes: {
"home": "onHomeRoute"
},
/*
*Override navigate function
*@param {String} route The route hash
*@param {PlainObject} options The Options for navigate functions.
* You can send a extra property "params" to pass your parameter as following:
* {
* params: 'data'
* }
**/
navigate: function(route, options) {
var routeOption = {
trigger: true
},
params = (options && options.params) ? options.params : null;
$.extend(routeOption, options);
delete routeOption.params;
//set the params for the route
this.param(route, params);
Backbone.Router.prototype.navigate(route, routeOption);
},
/*
*Get or set parameters for a route fragment
*@param {String} fragment Exact route hash. for example:
* If you have route for 'profile/:id', then to get set param
* you need to send the fragment 'profile/1' or 'profile/2'
*@param {Any Type} params The parameter you to set for the route
*@return param value for that parameter.
**/
param: function(fragment, params) {
var matchedRoute;
_.any(Backbone.history.handlers, function(handler) {
if (handler.route.test(fragment)) {
matchedRoute = handler.route;
}
});
if (params !== undefined) {
this.routeParams[fragment] = params;
}
return this.routeParams[fragment];
},
/*
* Called when hash changes to home route
**/
onHomeRoute: function() {
console.log("param =", this.param("home"));
}
})
Here I have written a custom function "param" for doing the get/set of parameters you want to send.
Now to send a custom parameter you can send it like the following:
var router = new Router();
Backbone.history.start({});
router.navigate("home", {
params: 'Your data'
});
To retrieve the data in get data inside the callback function you can write code like this:
this.param("home"); //this will return the parameter you set while calling navigate function or else will return null
这篇关于骨干传递模型路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
