BackboneJS-导航菜单

BackboneJS - Navigation menu

本文关键字：菜单 导航 BackboneJS-      更新时间：2024-04-26

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

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

我的菜单模型：

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

我的问题是，我不知道如何在不同的页面/视图中导航，所以如果有人能帮我吗？如何设置路由器？帮助将是伟大的！：-）

[UPDATE]好吧，我自己搞定了：

因为我的路由器中有"页面"作为参考：

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

我所要做的就是在html文件中，其中的锚点是：

<a href="#pages/{{this.url}}">{{this.name}}</a>
相关文章：