BackboneJS - 导航菜单

我想在我的页面顶部创建一个固定的定位导航菜单，点击相关链接后应该显示不同的视图。我有一个index.php文件，一个mainpage.js文件和集合，模型，视图，路由器和html模板的单独文件夹。显示菜单和视图到目前为止工作，只是导航不起作用，例如我不知道如何使它正常工作。导航栏应该是可见的所有时间和#mainContent股利应该显示的不同意见......BackboneJS - 导航菜单

我的index.php（身体的一部分）：

<body> 
<div id="container"> 
    <div id="mainMenu"></div> 
    <div id="mainContent"></div> 
</div> 
<script data-main="js/config" src="js/lib/requirejs/require.js"></script> 
<script> require(['config'], function(config) { 
    require(['app/mainpage']); 
}); 
</script> 
</body>

所以我创建MainMenuCollection，JSON文件：

[ 
{ 
    "name":"HOME", 
    "id":"1", 
    "url":"home" 
}, 
{ 
    "name":"FIRST PAGE", 
    "id":"2", 
    "url":"firstpage" 
}, 
{ 
    "name":"SECOND PAGE", 
    "id":"3", 
    "url":"secondpage" 
}, 
{ 
    "name":"THIRD PAGE", 
    "id":"4", 
    "url":"thirdpage" 
}, 
{ 
    "name":"ABOUT", 
    "id":"5", 
    "url":"about" 
}, 
{ 
    "name":"CONTACT", 
    "id":"6", 
    "url":"contact" 
} 
]

我收集文件：

define([ 
    "backbone", 
    "models/MainMenuModel" 
], 

function(Backbone, MainMenuModel) { 
var MainMenuCollection = Backbone.Collection.extend({ 
    model: MainMenuModel, 

    url: "MainMenuCollection.json" 
}); 

return MainMenuCollection; 
});

我MenuM奥德尔：

define([ 
"jquery", 
"backbone" 
], 

function($, Backbone) { 
var MainMenuModel = Backbone.Model.extend({ 
    urlRoot: "/MainMenuCollection.json" 
}); 

return MainMenuModel; 
});

这里是我的Menu.html文件：

<ul> 
{{#each mainmenu}} 
<li> 
    <a href="{{this.url}}">{{this.name}}</a> 
</li> 
{{/each}} 
</ul>

功能表视图本身：

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

    function(Backbone,Handlebars, Template) { 


     'use strict'; 

     var MainMenuView = Backbone.View.extend({ 

      template: Handlebars.compile(Template), 

      events: { 
       'click a':'mainMenu_event' 
      }, 

      mainMenu_event: function(e) { 
       var id = $(e.currentTarget).attr('href'); 
       Backbone.history.navigate(id, {trigger:true}); 
      }, 

      initialize: function() { 
      }, 

      render: function() { 
       //this.model.toJSON()) 
       $(this.el).html(this.template({mainmenu:this.collection.toJSON()})); 
       return this; 
      } 

     }); 

     return MainMenuView; 

    } 
    );

，并在年底的路由器：

define([ 
'backbone', 
// 
'views/MainMenu', 
'views/Home', 
'views/Firstpage', 
'views/Secondpage', 
'views/Thirdpage', 
'views/About', 
'views/Contact', 
'collections/MainMenuCollection' 
], 

function(
    Backbone, 
    MainMenuView, 
    HomeView, 
    FirstpageView, 
    SecondpageView, 
    ThirdpageView, 
    AboutView, 
    ContactView, 
    MainMenuCollection 
    ) { 

    'use strict'; 

    var Router = Backbone.Router.extend({ 

     routes: { 
      '': 'index', 
      'pages/firstpage' : 'firstpage', 
      'pages/secondpage' : 'secondpage' 
     }, 

     //Initializing the application 
     initialize: function() { 
      var self = this; 

      //Collections 
      this.mainMenuCollection = new MainMenuCollection(); 

      //Views 
      this.mainMenuView = new MainMenuView({el:'#mainMenu', collection:this.mainMenuCollection}); 
      this.homeView = new HomeView({el:'#mainContent'}); 
      //this.menuView = new Menu({el:'.menu'}); 

      self.homeView.render(); 
      //self.gridView.render(); 

      this.mainMenuCollection.fetch({success: function(collection) { 
       self.mainMenuView.collection=collection; 
       self.mainMenuView.render(); 
      }}); 


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

     }, 

     //Default route. 
     index: function() { 
      var self = this; 

     }, 

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

     secondpage: function() { 
      this.secondpageView = new SecondpageView({el:'#mainContent'}); 
      self.secondpageView.render(); 
     } 

    }); 

    return Router; 
} 
);

我的问题是，我不知道如何导航throu呃不同的页面/视图，所以如果有人能帮助我？我如何设置路由器？帮助会很棒！ :-)

来源

2013-12-08 SHT

[更新] OK我知道了自己：

，因为我有“页”在我的路由器的引用：

 routes: { 
     '': 'index', 
     'pages/firstpage' : 'firstpage', 
     'pages/secondpage' : 'secondpage' 
    },

所有我需要做的就是在html文件，其中的主播地址是：

<a href="#pages/{{this.url}}">{{this.name}}</a>

来源

2013-12-09 13:18:46 SHT

我正准备在您看到您的自动答案时回答您：D很高兴您解决它！ – Meta

@SHT，请将您的答案标记为“已接受”。 –

BackboneJS - 导航菜单

回答

相关问题