backbone.js 路由 模版 使用示例
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>
</title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/underscore.js"></script>
<script type="text/javascript" src="js/lib/backbone.js"></script>
</head>
<body>
<a href="#/view/120">view/120</a>
<a href="#/list/1/20">list 第一頁</a>
<a href="#/user/login/returnUrl=www.ujinbi.com/a/b">login</a>
<a href="#/a/v/v/css/ss">不存在的頁</a>
<div id="container">容器1</div>
<hr />
<div id="container2">容器2</div>
<script>
(function ($) {
_.templateSettings = {
// JavaScript可執行代碼的界定符
evaluate: /\{\{([\s\S]+?)\}\}/g,
// 直接輸出變量的界定符
interpolate: /\{\{=([\s\S]+?)\}\}/g,
// 需要將HTML輸出爲字符串(將特殊符號轉換爲字符串形式)的界定符
escape: /\{\{-([\s\S]+?)\}\}/g
};
//Backbone中的router，見名知意，router有路由的意思，顯然這裏是要控制url的。
//Backbone.Router會把你連接中的#標籤當做是url路徑
//從上面已經可以看到匹配#標籤之後內容的方法，有兩種：一種是用“:”來把#後面的對應的位置作爲參數；還有一種是“*”，它可以匹配所有的url，下面再來演練一下。
var AppRouter = Backbone.Router.extend({
routes: {
"/view/:id": "view",
"/list/:pageIndex/:pageSize": "list",
"/:route/:action/returnUrl=*path": "loadView",
"*actions": "defaultRoute"
},
view: function (id) {
//tmp = _.template($("#hello-template").html(), { id: id });
//$("#container").html(tmp);
//alert(tmp);
var t = _.template($("#t1").text());
$("#container").html(t({ text: "view:" + id }));
},
defaultRoute: function (actions) {
var t = _.template($("#t1").text());
$("#container").html(t({ text: "defaultRoute:" + actions }));
},
list: function (pageIndex, pageSize) {
var t = _.template($("#t1").text());
$("#container").html(t({ text: "list:" + pageIndex + "," + pageSize }));
},
loadView: function (route, action, path) {
var t = _.template($("#t1").text());
$("#container").html(t({ text: "loadView" + route + "." + action + " ,path:" + path }));
}
});
var app_router = new AppRouter;
Backbone.history.start();
})(jQuery);
</script>
<script>
$(function () {
var data = [{ name: 'car1' }, { name: 'car2' }, { name: 'car3' }];
var t = _.template($("#t2").text());
$("#container2").html(t({ title: "循環示例：", cars: data }));
});
</script>
<script type="text/template" id="t2">
{{=title}}
<br />
{{ _.each(cars, function(car) { }}
<li>{{=car.name}}</li>
{{ });}}
</script>
<script type="text/template" id="t1">
{{=text}}
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
WPF中設置窗體不平鋪背景圖
<Window.Background> <VisualBrush TileMode="Tile" Viewport="0,0,0.5,0.5"> <VisualBrush.Visual> <Ima