如何使用骨干.js中的路由器切换视图

Question

I faced the problem that view switches with router. 我遇到了使用路由器查看交换机的问题。

My application is written with Backbone.js. 我的应用程序是使用Backbone.js编写的。 It has 2 views, ApplicationView and ApplicationSubView . 它有2个视图， ApplicationView和ApplicationSubView 。

Originally, I thought that if occurred click event then through router should move the page 本来我以为如果发生点击事件，那么应该通过路由器来移动页面

For example, anyone who clicked the element having the about class then must exprience moved and re-rendered pages 例如，谁点击具有的元素about的类，那么必须移动的先进经验和重新渲染页面

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

While I can't really understand the question's description, I can see a lot of improvements that needs to be done so I've made a complete refactor of your code. 虽然我不太了解问题的描述，但可以看到需要做很多改进，因此我对您的代码进行了完整的重构。

Routing is just handling changes in the URL, so you can use anchor tags directly, without explicit events and navigate calls. 路由只是处理URL中的更改，因此您可以直接使用定位标记 ，而无需显式事件和navigate调用。

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>

See the <div id="content"></div> ? 看到<div id="content"></div>吗？ This is the content div and this is where the other pages will go. 这是内容div，这是其他页面的位置。 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();
});

如何使用骨干.js中的路由器切换视图

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-11 01:35:52

如何使用骨干.js中的路由器切换视图

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-11 01:35:52

解决方案1
1 已采纳 2016-12-11 01:35:52