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 - 導航菜單

回答

相關問題