backbone.js 路由模版使用示例

最新推荐文章于 2021-06-22 20:19:44 发布

felixfeng

最新推荐文章于 2021-06-22 20:19:44 发布

阅读量2.2k

点赞数 1

分类专栏：其它

本文链接：https://blog.csdn.net/felixfeng/article/details/46439399

版权

其它专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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>

felixfeng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
backbone.js 路由模版使用示例

view/120 list 第一页 login 不存在的页容器1 容器2 (function ($) { _.templateSettings = { // JavaScript可执行代码的界定符 eva
复制链接

扫一扫