Question

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

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

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

例如，任何点击具有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

虽然我无法理解问题的描述，但我可以看到需要做很多改进，因此我已经对您的代码进行了完整的重构。 / em>的

路由只是处理网址中的更改，因此您可以直接使用锚标记，而无需显式事件和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，这是其他页面的用武之地。我们将使用＆＃34;布局＆＃34;来管理它。视图：

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中使用路由器切换视图

1 个答案: