如何在 backbone.js 中使用路由器切换视图

Question

我遇到了视图随路由器切换的问题。

我的申请是用Backbone.js写的。它有 2 个视图，ApplicationView 和 ApplicationSubView。

原本我认为如果发生点击事件然后通过路由器应该移动页面

例如，单击具有 about class 的元素的任何人都必须体验移动和重新呈现的页面

var app = app || {};
$(function() {
    'use strict';
    var ApplicationView = Backbone.View.extend({
        //bind view to body element (all views should be bound to DOM elements)
        el: $('body'),
        //called on instantiation
        initialize: function() {
            //set dependency on ApplicationRouter
            this.router = app.Router;
            this.subView = new ApplicationSubView();
            //call to begin monitoring uri and route changes
            Backbone.history.start();
        },
        showSpinner: function() {
            console.log('show the spinner');
        },

        hideSpinner: function() {
            console.log('hide the spinner');
        },
        loadSubView: function() {
            this.showSpinner();
            var subView = new SubView();
            subView.on('render', this.hideSpinner);
        }
    });

    var ApplicationSubView = Backbone.View.extend({
        events: {
            'click ul.pills li.home-pill a': 'displayHome',
            'click ul.pills li.about-pill a': 'displayAbout',
            'click ul.pills li.contact-pill a': 'displayContact'
        },

        displayHome: function() {
            this.trigger('render');
            console.log('a subView render');
            this.router.navigate("home", true);
            return this;
        },

        displayAbout: function() {
            this.trigger('render');
            console.log('a subView render');
            this.router.navigate("about", true);
            return this;
        },

        displayContact: function() {
            this.trigger('render');
            console.log('a subView render');
            this.router.navigate("contact", true);
            return this;
        }
    });
    //load application
    app.view = new ApplicationView();
});

Answer 1

虽然我不能真正理解问题的描述，但我可以看到很多需要改进的地方，所以我对你的代码进行了完整的重构。

路由只是处理 URL 中的变化，因此您可以 直接使用锚标记 ，无需显式事件和 navigate 调用。

这就是触发路由所需的全部内容。

<body>
    <ul class="pills">
        <li><a href="#/">Home</a></li>
        <li><a href="#/about">About</a></li>
        <li><a href="#/contact">Contact</a></li>
    </ul>
    <div id="content"></div>
</body>

看到<div id="content"></div>了吗？这是内容 div，这是其他页面的去向。我们将使用 "layout" 视图来管理它：

var app = app || {};
(function() {
    'use strict';
    var views = app.view = app.view || {};
    views.Application = Backbone.View.extend({
        initialize: function() {
            // caching the jQuery object on init
            this.$content = this.$('#content');
        },
        setContent: function(view) {
            var content = this.content;
            if (content) content.remove();
            content = this.content = view;
            this.$content.html(content.render().el);
        },
    });

    // make a view for each sub-page
    views.Home = Backbone.View.extend({ /* ... */ });
    views.About = Backbone.View.extend({ /* ... */ });
    views.Contact = Backbone.View.extend({ /* ... */ });
})();

然后，您需要定义一个路由器来处理这些路由。

var app = app || {};
(function() {
    'use strict';
    var views = app.view = app.view || {};

    app.Router = Backbone.Router.extend({
        routes: {
            'about': 'aboutRoute',
            'contact': 'contactRoute',
            // put the catch-all last
            '*home': 'homeRoute',
        },
        initialize: function() {
            // create the layout once here
            this.layout = new views.Application({
                el: 'body',
            });
        },
        homeRoute: function() {
            var view = new views.Home();
            this.layout.setContent(view);
        },
        aboutRoute: function() {
            var view = new views.About();
            this.layout.setContent(view);
        },
        contactRoute: function() {
            var view = new views.Contact();
            this.layout.setContent(view);
        }
    });
})();

并在文档准备好后使用它：

$(function() {
    var router = new app.Router();
    Backbone.history.start();
});

如何在 backbone.js 中使用路由器切换视图

How to switch view using router in backbone.js

javascript

backbone.js