如何修复Foundation.js移动显示模态html从骨干视图

Question

我正在开发一个网站与backbone.js，和foundation.js。我创建了一个主干父视图，并给它附加了一个主干子视图。

    this.myProfileModalView = new MyApp.Views.MyProfileModalView();
    this.$el.append(this.myProfileModalView.render().el);

这个子视图包含了foundation reveal modal的html。

<div id="profileModal" class="reveal-modal medium" data-options="close_on_background_click:false;" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" >

当站点加载时，模态作为子元素被正确地添加到html中。然而，当我点击打开模态按钮时，模态html突然被放置在标签之前。这使得主干事件无法发挥作用，还有这个。$el返回null

我如何解决这个问题，使附加的视图停留在同一位置?

Answer 1

对于任何寻找答案的人，我通过添加root_element:

修复了此错误。

this.myProfileModalView.$el.find('#profileModal').foundation('reveal', 'open', {
        close_on_background_click:false,
        close_on_esc: false,
        animation: 'fadeAndPop',
        root_element: this.myProfileModalView
    })