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

本文介绍了如何在backbone.js中使用路由器切换视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了使用路由器查看切换的问题。

I faced the problem that view switches with router.

我的应用程序是用Backbone.js编写的。它有2个视图， ApplicationView 和 ApplicationSubView 。

My application is written with Backbone.js. It has 2 views, ApplicationView and ApplicationSubView.

最初，我认为如果发生了点击事件，那么通过路由器应该移动页面

Originally, I thought that if occurred click event then through router should move the page

例如，任何人点击了的元素 class然后必须exprience移动并重新呈现页面

For example, anyone who clicked the element having the about class then must exprience moved and re-rendered pages

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

推荐答案

虽然我无法理解问题的描述，我可以看到需要做很多改进，所以我已经完成了代码的完整重构。

路由只是处理更改了网址，因此您可以直接使用锚标记，无需显式事件和导航调用。

Routing is just handling changes in the URL, so you can use anchor tags directly, without explicit events and navigate calls.

这就是你触发路线所需的一切。

This is all you'd need to trigger the routes.

<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，这是其他页面的用武之地。我们将使用布局视图来管理它：

See the <div id="content"></div>? This is the content div and this is where the other pages will go. We'll manage that using a "layout" view:

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({ /* ... */ });
})();

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

Then, you need to define a router that handles these routes.

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

并在文件准备就绪时使用它：

And to use it when the document is ready:

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

这篇关于如何在backbone.js中使用路由器切换视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！