在Backbone.js应用程序中的DOM中追溯父视图外部的子视图

时间:2013-07-05 16:58:02

标签: javascript jquery backbone.js

在我的骨干应用程序中,我在父视图中创建一个popover并将其添加到DOM中,如此

afterRender: function() {
    this.$el.append(
      new Popover.Views.Default({ 
        stick:'right', 
        offsetTop: 3, 
        offsetRight: 5, 
        content: "Foo", 
        reference: this.$el
     }).render().$el
   );
},
toggle: function(){  
  app.vent.trigger('popover34:toggle');
}

然而,popover会附加到其父视图。父视图是一个链接,这会在弹出窗口中导致一些css问题。

我的问题是,做以下事情是否安全:

afterRender: function() {
    $('body').append(
      new Popover.Views.Default({ 
        stick:'right', 
        offsetTop: 3, 
        offsetRight: 5, 
        content: "Foo", 
        reference: this.$el
     }).render().$el
   );
}

或者有没有办法在父视图旁边设置它?问题是,当我切换弹出窗口时,它会多次添加到DOM中。

2 个答案:

答案 0 :(得分:1)

看起来你正在使用木偶。使用Marionette,一种方法是使用regions。来自文档:

  

区域提供了一种一致的方式来管理您的视图并在您的应用程序中显示/关闭它们。他们使用jQuery选择器在正确的位置显示您的视图。

您可以将您的区域放在您喜欢的任何位置,并使用Event Aggregator触发它。此外,它会自动关闭旧视图,因此您不会使用僵尸。

答案 1 :(得分:1)

要在此处回答(并希望澄清)艾萨克的回答,您的“父母”视图应位于一个区域,Popover视图应位于其他区域。

Brian Mann在Marionette.js上做了excellent set of videos并且做了很好的应用程序设计,one specifically that demonstrates your exact scenario

祝你好运, 亚伦