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>

[ 
{ 
    "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 MainMenuCollection, JSON 파일을 생성 ODEL :

여기

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>

Menu (메뉴)보기 자체 :

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; 
} 
);

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; 

    } 
    );

과 끝 부분에있는 라우터

내 문제는, 내가 어떻게 throu를 탐색 해야할지 모르겠다는 것입니다. gh 다른 페이지 /보기, 그래서 누군가가 나를 도울 수 있다면? 라우터를 어떻게 설정합니까? 도움이 될 것입니다! :-)

출처

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 - 내비게이션 메뉴

답변

관련 문제