Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Backbone.js Modals骨干路由器_Backbone.js_Coffeescript - Fatal编程技术网

Backbone.js Modals骨干路由器

Backbone.js Modals骨干路由器,backbone.js,coffeescript,Backbone.js,Coffeescript,我有一个非常基本的主干JS应用程序,它有modals。目前,我的路由器呈现如下模式: class App.Routers.Router extends Backbone.Router routes: "modal" : "modal" modal: -> view = new App.Views.Modal.New() $('#shared').html(view.el) view.render() view.show() retu

我有一个非常基本的主干JS应用程序,它有modals。目前,我的路由器呈现如下模式:

class App.Routers.Router extends Backbone.Router
  routes:
    "modal" : "modal"

  modal: ->
    view = new App.Views.Modal.New()
    $('#shared').html(view.el)
    view.render()
    view.show()
    return

class App.Views.Sessions.New extends Backbone.View
  template: Handlebars.templates["backbone/templates/modals"]

  initialize: (options) ->
    super(options)

  render: ->
    $(@el).html(@template())
    $('.modal', @el).modal()
    $('.modal', @el).on 'hidden', @cleanup
    return @

  show: ->
    $('.modal', @el).modal('show')

  hide: ->
    $('.modal', @el).modal('hide')

  cleanup: ->
    # ?

这很好,但是我不清楚如何处理窗口历史和用户选择后退按钮(即,如何在单击后退时拆除模式)。有人对最好的方法有什么想法吗?谢谢

您偶然发现了单页应用程序(SPA)的一个有趣问题。是的,它可能会变得有点棘手,但简单的软件工程原理/设计在这里会有所帮助。我通过以下方式处理清理:

有一个单独的类/对象负责管理不同“应用程序部分”之间的视图转换。例如,在我的应用程序中,我有如下内容:

var App = {};

//when showing a specific app:

App.showView = function(appToShow){
if(this.currentApp)
  currentApp.close();

this.currentApp = appToShow;
//render appToShow;
}
appToShow
是一个具有方法
create/render
close
的“类”。因此,应用程序负责清理

现在,有时我在主应用程序中有模式或“子应用程序”。我使用了上面的一个变体,并在
App
对象中添加了
close
方法。但基本思路是将这些“子应用程序”添加为主应用程序的属性:

//when creating modal:
App.addModal = function(modal){
 this.currentApp.modal = modal;
}
现在,当通过单击“上一步”按钮或切换到应用程序的不同部分进行切换时,您必须调用
应用程序
-管理器来处理清理和切换。基本上就像说:

App.closeModal = function(modal){
 if(this.currentApp.modal)
  this.currentApp.modal.close();
}

根据路由器的组织方式,您应该能够决定是完全关闭整个应用程序还是仅关闭模式/子应用程序。基本上,您的“应用程序管理器”是一个单独的对象,只负责处理视图之间的转换,不必是
主干。View
-单独的对象就可以了。您甚至可以通过创建和事件聚合器,让它使用主干网的事件侦听事件。德里克·贝利(Derick Bailey)写了一篇优秀的博客文章,详细介绍了这一点:

你偶然发现了单页应用程序(SPA)的一个有趣问题。是的,它可能会变得有点棘手,但简单的软件工程原理/设计在这里会有所帮助。我通过以下方式处理清理:

有一个单独的类/对象负责管理不同“应用程序部分”之间的视图转换。例如,在我的应用程序中,我有如下内容:

var App = {};

//when showing a specific app:

App.showView = function(appToShow){
if(this.currentApp)
  currentApp.close();

this.currentApp = appToShow;
//render appToShow;
}
appToShow
是一个具有方法
create/render
close
的“类”。因此,应用程序负责清理

现在,有时我在主应用程序中有模式或“子应用程序”。我使用了上面的一个变体,并在
App
对象中添加了
close
方法。但基本思路是将这些“子应用程序”添加为主应用程序的属性:

//when creating modal:
App.addModal = function(modal){
 this.currentApp.modal = modal;
}
现在,当通过单击“上一步”按钮或切换到应用程序的不同部分进行切换时,您必须调用
应用程序
-管理器来处理清理和切换。基本上就像说:

App.closeModal = function(modal){
 if(this.currentApp.modal)
  this.currentApp.modal.close();
}
根据路由器的组织方式,您应该能够决定是完全关闭整个应用程序还是仅关闭模式/子应用程序。基本上,您的“应用程序管理器”是一个单独的对象,只负责处理视图之间的转换,不必是
主干。View
-单独的对象就可以了。您甚至可以通过创建和事件聚合器,让它使用主干网的事件侦听事件。德里克·贝利(Derick Bailey)写了一篇优秀的博客文章,详细介绍了这一点: