Question

我有一个非常简单的主菜单，有4个锚点和相关的视图。无论如何，在其中一个视图中我想添加一个带有3个标签的小子菜单，点击它们后会显示不同的视图。我想出了如何使用pushState:false，但我想要的是一个干净的URL。现在，我的网址看起来像http://localhost/myproject/#secondpage/subview1或http://localhost/myproject/#secondpage/subview2等等。所以，无论触发哪个子视图/标签，我都知道如何实现http://localhost/secondpage？

我使用RequireJS和HandlebarsJS（用于HTML模板）

所以现在我的代码（片段）看起来像这样：

Router.js

routes: {
'': 'index',
'firstpage' : 'firstpage',
'secondpage' : 'secondpage',
'secondpage/sub1' : 'sub1',
'secondpage/sub2' : 'sub2',
'secondpage/sub3' : 'sub3',
'thirdpage' : 'thirdpage'
},

Backbone.history.start({
    pushState: false
});

我的HTML与锚点：

<ul>
<li>
    <a class="sub1" href="#secondpage/sub1">Bands</a>
</li>
<li>
    <a class="sub2" href="#secondpage/sub2">Koncert</a>
</li>
<li>
    <a class="sub3" href="#secondpage/sub3">Locations</a>
</li>   
</ul>

我的视图看起来像

  define(['backbone','handlebars', 'text!templates/SubMenu.html'],

    function(Backbone,Handlebars, Template) {


        'use strict';

        var SubMenuView = Backbone.View.extend({

            template: Handlebars.compile(Template),

            initialize: function () {
                _.bindAll(this);
            },

            render: function() {
                $(this.el).html(this.template());
                return this;
            }

        });

        return SubMenuView;


    }
  );

另一件事是：我应该通过设置事件将操作移动到View吗？我有点尝试过，但它没有工作，因为在路由器中定义了视图......

我尝试设置pushState:true，然后删除路由器中的secondpage/sub1内容，然后在我的视图中写道：

events: {
'click a.sub1': 'sub1',
},

sub1: function(event) {
   event.preventDefault();
   var sub1Router = new Backbone.Router();
   var route = '/secondpage/';
   sub1Router.navigate(route, {trigger: true});
},

但是没有用，这给了我找不到网址所以......

欢迎任何帮助！提前谢谢......

[UPDATE] 好的，所以根据请求，这是我的（新）路由器：

var Router = Backbone.Router.extend({

routes: {
    '': 'index',
    'firstpage' : 'firstpage',
    'secondpage' : 'secondpage',
    'thirdpage' : 'thirdpage'
},

initialize: function () {
    var self = this;

    //Views
    this.mainMenuView = new MainMenuView({el:'#mainMenu'}).render();
    this.subMenuView = new SubMenuView();

    Backbone.history.start({
        pushState: true
    });

},

index: function () {
    var self = this;
},

firstpage: function() {
    this.firstpageView = new FirstpageView({el:'#topContent'}).render();
},

secondpage: function() {
    this.secondpageView = new SecondpageView({el:'#topContent'}).render();
    this.subMenuView = new SubMenuView({el:'#subMenu'}).render();
},

thirdpage: function() {
    var thirdpageView = new ThirdpageView({ el:'#topContent', collection:this.categoryCollection}).render();
},

sub1: function() {
    this.sub1View = new Sub1View({el:'#subContent_2'}).render();
},

sub2: function() {
    this.sub2View = new Sub2View({el:'#subContent_2'}).render();
},

sub3: function() {
    this.sub3View = new Sub3View({el:'#subContent_2'}).render();
}                       


});

return Router;
}

我的（新）视图如下：

var SubMenuView = Backbone.View.extend({

template: Handlebars.compile(Template),

events: {
'click .sub1': 'sub1',
'click .sub2': 'sub2',
'click .sub3': 'sub3',

},

sub1: function(event) {
    var sub1Router = new Backbone.Router();
    var route = '/secondpage';
    sub1Router.navigate(route, {trigger: true});
},

sub2: function(event) {
    event.preventDefault();
    var sub2Router = new Backbone.Router();
    var route = '/secondpage';
    sub2Router.navigate(route, {trigger: true});
},

sub3: function(event) {
    event.preventDefault();
    var sub3Router = new Backbone.Router();
    var route = '/secondpage';
    sub3Router.navigate(route, {trigger: true});
},              

initialize: function () {
    _.bindAll(this);
},

render: function() {
    $(this.el).html(this.template());
    return this;
}

 });

 return SubMenuView;

我的（新）HTML模板：

<ul>
<li>
    <a class="sub1" href="/secondpage/">Sub1</a>
</li>
<li>
    <a class="sub2" href="/secondpage/">Sub2</a>
</li>
<li>
    <a class="sub3" href="/secondpage/">Sub3</a>
</li>   
</ul>

希望这可以提供更多的输入/建议......这真的让我疯狂，这让我考虑使用.show（）和.hide（）jquery方法，即使我真的不想......

Answer 1

您所描述的是骨干路由如何工作，您使用'/ secondpage / sub1'并使用服务器路由，或使用'#secondpage / sub1'并命中骨干路由。无论哪种方式，地址栏都会使用您的网址进行更新。

另一种选择是在视图中使用事件，处理点击事件并相应地更新视图的模板。

但是，如果您打算使用路线，那么可以查看clickify.js。我还没有自己使用它，虽然我已将它标记为可能的未来使用...听起来它可能会做你想要的。

Answer 2

尝试在路由器中使用它：

Backbone.history.navigate('secondpage');

完成所有工作后（获取模型，渲染视图）

BackboneJS - 子视图导航

2 个答案: