如何让这条骨干路径发挥作用?

时间:2012-06-03 13:56:33

标签: jquery jquery-mobile backbone.js backbone-routing

CI'm在制作一条路线时遇到问题。我有项目的列表视图,单项html看起来像这样:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#my_clients/1486" class="ui-link-inherit">    
  <h4 class="ui-li-heading">number/h4>
  <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">A</span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>

我的路由器代码:

var AppRouter = Backbone.Router.extend({

    routes:{
        "": "login",
        "login": "login",
        "my_clients": "myClients",
        "my_clients/:id": "myClientDetails" 

    },

    initialize:function () {
        // Handle back button throughout the application
        $('.back').live('click', function(event) {
            window.history.back();
            return false;
        }); 
        this.firstPage = true;
    },

    login: function () {            
        this.changePage(new LoginView({ model: new User() }));
    },

    myClients: function() {     
        this.changePage(new MyClientsView({ model: new MyClientsCollection() }));
    },

    myClientDetails: function(id) {
        var client = new Client({ id: id });
        self = this;
        client.fetch({
            success: function(data) {
                self.changePage(new MyClientDetailsView({ model: data }));
            }
        });
    },

    changePage:function (page) {
        $(page.el).attr('data-role', 'page');
        page.render();
        $('body').append($(page.el));
        var transition = $.mobile.defaultPageTransition;
        // We don't want to slide the first page
        if (this.firstPage) {
            transition = 'none';
            this.firstPage = false;
        }
        $.mobile.changePage($(page.el), {changeHash:false, transition: transition});
    }

});

登录和MyClients页面工作正常,但是当我点击列表视图项目中的链接以显示单个客户端详细信息时,我看到在我的firebug控制台中调用并且路由无效。

我错过了什么?

1 个答案:

答案 0 :(得分:2)

<a href="#my_clients/1486"...>更改为<a href="#/my_clients/1486"...>(换句话说,在/之后添加#)。 请参阅示例:http://jsfiddle.net/theotheo/sz6y8/