添加路由到url

时间:2014-11-26 17:02:30

标签: javascript html backbone.js routes

我有一些Javascript经验,刚开始学习Backbone.js

我的网址如下:

.../index.html

,页面如下所示:

enter image description here

当我点击New User Button时,网址如下所示:

...index.html#/new

但我希望它看起来像这样:

...index.html/#/new

有人可以解释为什么我的网址没有添加额外的' /'在.html之后

正如您在下面的代码中看到的那样,有一行:<a href="#/new" class="btn btn-primary">New User</a>

为了尝试解决问题,我只写了..."/#/new...,但这根本不起作用。

有什么想法吗?

代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BackboneTutorials.com Beginner Video</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>User Manager</h1>
        <hr />
        <div class="page"></div>    
    </div>  

<script type="text/template" id="user-list-template">

<a href="#/new" class="btn btn-primary">New User</a>
<hr />
<table class="table striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <% _.each(users, function(user) { %>
            <tr>
                <td><%= user.get('firstname') %></td>
                <td><%= user.get('lastname') %></td>
                <td><%= user.get('age') %></td>
                <td></td>
            </tr>
        <% }); %>
    </tbody>
</table>


</script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>  
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

    <script>

        $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
        options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
        });

        var Users = Backbone.Collection.extend({
            url: '/users'
        });

        var UserList = Backbone.View.extend({
            el: '.page',
            render: function(){
                var that=this;
                var users = new Users();
                users.fetch({
                    success: function(users){
                        var template = _.template($('#user-list-template').html());
                        that.$el.html(template({users: users.models}));
                    }
                })
            }
        });


        var Router = Backbone.Router.extend({
            routes: {
                '': 'home'
            }
        })

        var userList = new UserList();

        var router = new Router();
        router.on('route:home', function() {
            userList.render();
        });

        Backbone.history.start();

    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

如果.../.../index.html打开的页面与.../index.html/#/new几乎相同,则会显示.../#/new。我不确定为什么会这样,但根据我的经验,我知道链接时......

  • 文件最后不接受/
  • 目录将同时阅读,但最终会附加/

要完成这项工作,你应该为你的htaccess文件添加一些魔力。不幸的是,我并不熟悉它。