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

Posted 2023-02-25

【中文标题】如何使用backbone.js 路由器切换视图？

【英文标题】：how to switch views with the backbone.js router?

【发布时间】：2014-04-06 16:50:58

【问题描述】：

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

为了一个例子（我正在构建什么来学习这个），我有一个用于联系人的基本 CRUD 应用程序，具有创建表单、所有联系人列表、联系人单一视图和编辑表单。

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

我有两个想法，

1) 从我的路由器触发自定义事件，该事件删除所有视图并发送可以在所有视图中侦听的事件（触发关闭方法）和然后实例化特定视图的主 App 视图 - 即：

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 所以我可以发布/订阅)

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

请注意，我希望在不深入研究其他库或框架（如木偶等）的情况下实现这一目标。

【参考方案1】：

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

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)

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 负责呈现您的视图

【讨论】：

嘿，Rida，谢谢，但是根据我的要求，这在哪里适合？我应该把它放在哪里？ - 您能否再解释一下这个功能，以及我将如何根据我的应用示例来使用它？

再次感谢 Rida，我可以请你解释一下条件 - cid 道具来自哪里？我想我现在理解了这个概念，您是说我应该创建一个与适当路线相关的视图的新实例，并删除旧视图（如果它们是一个） - 您是否有理由建议处理视图实例/渲染在这里而不是在整个应用程序视图中？这只是“正确的方法”吗？

cid 是 Backbone 为每个视图实例生成的唯一 ID。 Backbone.Router provides methods for routing client-side pages 看看文档backbonejs.org/#Router，如果您在整个应用程序视图中处理视图实例/渲染，您将打破 MVC 模式，您将有一个 V（视图）扮演 C（控制器）的角色.

仔细想想，既然您已经解释过了，从路由器发布事件以触发视图似乎确实是一个不必要的抽象级别。