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

问题描述

这更多是一个概念性问题，就使用主干路由器和在主干中渲染视图而言.

This is more of a conceptual question, in terms of using the backbone router and rendering views in backbone.

举个例子(我正在构建来学习这个)我有一个基本的联系人 CRUD 应用程序，带有创建表单、所有联系人的列表、一个联系人单一视图和一个编辑表单.

for the sake of an example (what I'm building to learn this with) I've got a basic CRUD app for contacts, with create form, a listing of all contacts, a contact single view and an edit form.

为简单起见，我想说我一次只想看到其中的一个.显然，用 jQuery 显示和隐藏它们是微不足道的，但这不是我想要的.

for simplicities sake I'm going to say that I would only want to see one of these things at a time. Obviously showing and hiding them with jQuery would be trivial, but thats not what I'm after.

我有两个想法，

1) 从我的路由器触发自定义事件，删除所有视图并发送可以在所有视图中侦听的事件(触发关闭方法)和一个主应用程序视图，然后实例化特定视图 - 即:

1) trigger custom events from my router that removes all views and sends events that could be listened for in all views (triggering a close method ) and a main App view that then instantiates a specific view - ie :

App.Router = Backbone.Router.extend({
    routes: {
        '' : 'index',
        'addnew' : 'addNew',
        'contacts/:id' : 'singleContact',
        'contacts/:id/edit' : 'editContact'
    },

    index: function(){

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:index');
    },

    addNew: function() {

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:addNew');
    },

    singleContact: function(id) {

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:singleContact', id);
    },

    editContact: function(id) {

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:editContact', id);
    },

});

(nb:vent 正在扩展主干事件 obj 所以我可以发布/订阅)

(nb : vent is extending the backbone events obj so I can pub / sub )

2) 或者我会/可以/应该发送关闭所有事件并在路由器中创建视图的实例?

2) or would / could / should I send a close all event and create an instance of the view in the router ?

请注意，我希望在不深入研究其他库或框架(如 marionette 等)的情况下实现这一目标.

Note I'm looking to achieve this without delving into additional libraries or frameworks like marionette etc.

推荐答案

您可以像这样使用实用程序对象:

You can use an utility object like this :

var ViewManager = {
    currentView : null,
    showView : function(view) {
        if (this.currentView !== null && this.currentView.cid != view.cid) {
            this.currentView.remove();
        }
        this.currentView = view;
        return view.render();
    }
}

并且每当您想显示视图时，请使用 ViewManager.showView(yourView)

and whenever you want to show a view use ViewManager.showView(yourView)

App.Router = Backbone.Router.extend({
    routes: {
        '' : 'index',
        'addnew' : 'addNew',
        'contacts/:id' : 'singleContact',
        'contacts/:id/edit' : 'editContact'
    },

    index: function(){
        var indexView ...
        ViewManager.showView(indexView);
    },

    addNew: function() {
        var addNewView ...
        ViewManager.showView(addNewView);
    },

    singleContact: function(id) {
        var singleContactView ...
        ViewManager.showView(singleContactView);
    },

    editContact: function(id) {
        var editContactView ...
        ViewManager.showView(editContactView);
    },

});

因此 ViewManager 负责渲染您的视图

So it's the ViewManager that's responsible of rendering your views

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