Question

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

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

我的MenuModel：

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

我的问题是，我不知道如何浏览不同的页面/视图，所以如果有人可以帮助我吗？如何设置路由器？帮助会很棒！： - ）

Answer 1

[UPDATE] 好吧，我自己得到了它：

因为我在路由器中有'pages'作为参考：

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

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

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

BackboneJS - 导航菜单

1 个答案: