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

这是一个概念性问题，在骨干网中使用骨干路由器和渲染视图。如何使用backbone.js路由器切换视图？

为了一个例子（我正在建设的这个东西）我有一个基本的联系人CRUD应用程序，包括创建表单，所有联系人列表，联系单个视图和编辑表单。

为了简单起见，我想说我只想在一次看到这些东西之一。很明显，用jQuery显示和隐藏它们很简单，但那不是我所追求的。

我有两个想法，

1）从我的路由器，它会删除所有的意见和发送，可以在所有的意见被倾听的事件（触发close方法）和一个主应用程序认为随后实例触发自定义事件具体的观点 - 即：

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

});

（注：通风口被延长骨干事件OBJ，所以我可以发布/订阅）

2）或会/会/我应该发送关闭所有的事件，并创建路由器中的视图实例？

注意我在寻找实现这一目标而无需钻研额外的库或框架，如提线木偶等

来源

2014-03-04 pushplaybang

您可以使用一个实用对象是这样的：

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这是负责任的渲染你的看法

来源

2014-03-04 22:09:22

嗨Rida，谢谢，但是根据我提出的问题以及我将它放在哪里，它适合哪里？ - 你能解释一下这个函数吗？请根据我的应用程序示例来使用它？ – pushplaybang

再次感谢里达，我可以请你解释有条件 - cid道具来自哪里？我认为我现在理解了这个概念，你说我应该创建一个与适当路径相关的视图的新实例，并且如果它们是一个，则移除旧视图 - 是否有理由建议处理视图实例/渲染这里而不是整体应用程序视图？这只是“正确的方式”吗？ – pushplaybang

'cid'是Backbone为每个视图实例生成的唯一ID。 'Backbone.Router提供了路由客户端页面的方法'看看doc http://backbonejs.org/#Router，如果你在整个应用视图中处理视图实例/渲染，你将打破MVC模式，你将有一个V（视图）扮演C（控制器）的角色。 –

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

回答

相关问题