5、backboneのRouterの例
このrouterの使用について、私は今でも疑問を持っています.このようなリンクactionをクリックするたびにイベントがトリガーされますがurlも変わりますので、ブラシ性をつけると自動的にイベントがトリガーされるのではないでしょうか.あるいはこれは単一のページのウェブサイトにしか使われていないか、モバイルデバイスのウェブサイトに使われているか、私はまだ使えません.
Router:Backboneのrouterを大まかに説明します.名を見て、routerにはルートの意味があります.明らかにurlをコントロールします.
Backbone.Routerは接続中の#ラベルをurlパスとします
私が疑問に思っていても、いくつかの例を書いてテストします.結局実践してこそ惑いを解くことができる.
1、簡単な例
var AppRouter = Backbone.Router.extend({ routes: { "*actions" : "defaultRoute" }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start();
このRouterを初期化するには、Backbone.history.start()メソッドを呼び出す必要があります.
このRouterの使用はdjangoのurlconfファイルが提供する機能に似ています.djangoを知っていれば.
ページにはこのようなaラベルが必要です:testActions
2、このroutesマッピングはどのようにパラメータを伝達しますか
次の例を見ると、すぐにわかります.
var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id" : "getPost", "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start();
対応するページにはハイパーリンクがあるはずです:Post 120
上から#ラベルの後の内容を一致させる方法は、2つあります.1つは「:」で#の後ろの対応する位置をパラメータとします.もう1つは「*」で、urlをすべて一致させることができます.次に練習してみましょう.
まとめて、routerの使用はdomノードのバインドによってイベントをトリガーする煩雑さを取り除くことができるように見えますが、唯一不快なのはクリックしてからリフレッシュするとurlが変わったので、対応方法を再実行することです.これも解決できる問題かもしれませんが、私はまだ発見していません.
また、他のモジュール(model,view,collectionを指す)では、routes:{}を使用してリンクに基づいて関数をトリガすることもできます.
以下に完全なコードを示し、自分で試験を削除することを注釈します.
このリンクは次のとおりです.
http://www.the5fire.net/5-backbone-router.html
Router:Backboneのrouterを大まかに説明します.名を見て、routerにはルートの意味があります.明らかにurlをコントロールします.
Backbone.Routerは接続中の#ラベルをurlパスとします
私が疑問に思っていても、いくつかの例を書いてテストします.結局実践してこそ惑いを解くことができる.
1、簡単な例
var AppRouter = Backbone.Router.extend({ routes: { "*actions" : "defaultRoute" }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start();
このRouterを初期化するには、Backbone.history.start()メソッドを呼び出す必要があります.
このRouterの使用はdjangoのurlconfファイルが提供する機能に似ています.djangoを知っていれば.
ページにはこのようなaラベルが必要です:testActions
2、このroutesマッピングはどのようにパラメータを伝達しますか
次の例を見ると、すぐにわかります.
var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id" : "getPost", "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start();
対応するページにはハイパーリンクがあるはずです:Post 120
上から#ラベルの後の内容を一致させる方法は、2つあります.1つは「:」で#の後ろの対応する位置をパラメータとします.もう1つは「*」で、urlをすべて一致させることができます.次に練習してみましょう.
var AppRouter = Backbone.Router.extend({
routes: {
"/posts/:id" : "getPost",
"/download/*path": "downloadFile", // <a href="#/download/user/images/hey.gif">download gif</a>
"/:route/:action": "loadView", // <a href="#/dashboard/graph">Load Route/Action View</a>
"*actions" : "defaultRoute"
},
getPost: function(id) {
alert(id);
},
defaultRoute : function(actions){
alert(actions);
},
downloadFile: function( path ){
alert(path); // user/images/hey.gif
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
}
});
var app_router = new AppRouter;
Backbone.history.start();まとめて、routerの使用はdomノードのバインドによってイベントをトリガーする煩雑さを取り除くことができるように見えますが、唯一不快なのはクリックしてからリフレッシュするとurlが変わったので、対応方法を再実行することです.これも解決できる問題かもしれませんが、私はまだ発見していません.
また、他のモジュール(model,view,collectionを指す)では、routes:{}を使用してリンクに基づいて関数をトリガすることもできます.
以下に完全なコードを示し、自分で試験を削除することを注釈します.
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-router</title>
</head>
<body>
<a href="#/posts/120">Post 120</a>
<a href="#/download/user/images/hey.gif">download gif</a>
<a href="#/dashboard/graph">Load Route/Action View</a>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
(function ($) {
//Backbone router， ，router ， url 。
//Backbone.Router # url
/**
//1、
var AppRouter = Backbone.Router.extend({
routes: {
"*actions" : "defaultRoute"
},
defaultRoute : function(actions){
alert(actions);
}
});
var app_router = new AppRouter;
Backbone.history.start();
//2、 url ， ， router .
var AppRouter = Backbone.Router.extend({
routes: {
"/posts/:id" : "getPost",
"*actions" : "defaultRoute"
},
getPost: function(id) {
alert(id);
},
defaultRoute : function(actions){
alert(actions);
}
});
var app_router = new AppRouter;
Backbone.history.start();
**/
// # ， ： “:” # ； “*”， url， 。
var AppRouter = Backbone.Router.extend({
routes: {
"/posts/:id" : "getPost",
"/download/*path": "downloadFile", // <a href="#/download/user/images/hey.gif">download gif</a>
"/:route/:action": "loadView", // <a href="#/dashboard/graph">Load Route/Action View</a>
"*actions" : "defaultRoute"
},
getPost: function(id) {
alert(id);
},
defaultRoute : function(actions){
alert(actions);
},
downloadFile: function( path ){
alert(path); // user/images/hey.gif
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
}
});
var app_router = new AppRouter;
Backbone.history.start();
})(jQuery);
</script>
</html>このリンクは次のとおりです.
http://www.the5fire.net/5-backbone-router.html