在Backbone.js应用程序的DOM中将子视图附加到父视图之外

Append child view outside parent view in DOM in Backbone.js app

本文关键字：视图 js Backbone 应用程序 DOM      更新时间：2023-09-26

在我的主干应用程序中，我在父视图中创建了一个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被附加到其父视图中。父视图是一个链接，这会导致popover中出现一些css问题。

我的问题是，做这样的事情安全吗：

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

或者有没有办法将其设置在父视图旁边？问题是，当我切换popover时，它将被多次添加到DOM中。

为了在这里支持（并希望澄清）Isaac的答案，您的"父"视图应该在一个区域，Popover视图应该在另一个区域。

Brian Mann在Marionette.js上制作了一组出色的视频和出色的应用程序设计，其中一个专门展示了您的确切场景。

祝你好运，Aaron

看起来您正在使用Marionette。使用Marionette，处理此问题的一种方法是使用区域。来自文档：

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

您可以将您的区域放在任何您喜欢的地方，并使用事件聚合器触发它。此外，它会自动关闭旧视图，这样就不会出现僵尸。

相关文章：