Question

我的模板中有一个模态对话框。需要以编程方式从代码中触发此对话框。所以我需要通过javascript显示模态，因为我没有数据切换按钮来启动模态对话框。

模态正在使用bootstrap，但是bootstrap-3没有显示，即使我可以直接从控制台显示它。这里的问题是如何在模板渲染后执行javascript，以启动模态对话框。

有一个被调用的Template.rendered / created函数，在这个this.autorun（runFunc）里面应该运行代码来更新DOM元素。这被正确调用，但我仍然无法触发模式显示。

Template.createDialog.created = function() {
console.log("teamplate created");

this.autorun(function(){
    $('#myModal').modal('show');    
  });
};

更新这有效：

Template.createDialog.rendered = function() {
console.log("teamplate created");

this.autorun(function(){
    $('#myModal').modal('show');    
  });
};

使用渲染功能，我可以触发模态显示。但问题是渲染和创建两者只被调用一次。如果达到条件，我需要一种方法来一致地触发模态对话框。

与流星的这个引导模态对话变得痛苦和黑客。是否无法使用某些类参数显示/隐藏模态？

Answer 1

出于完全你发现的原因，模态在Meteor中变得非常棘手。我不使用Bootstrap，但基本原则是你需要以编程方式触发模式，这样你就可以在知道html已经渲染后运行相关的框架代码但仍保留反应性（这与Foundation和语义UI模式）。

在您的用例（似乎是单个模态）中，这不应该是一个太大的问题。设置反应变量modalVisible（会话变量或类似变量），并根据需要使用它来显示或隐藏模态。

this.autorun(function(c) {
    if (Session.get('modalVisible')) {
        $('#myModal').modal('show'); 
    } else {
        $('#myModal').modal('hide');
    }
});

如果你将所有这些放在rendered回调中，那么只有在它被添加到DOM后才会尝试显示模态（没有它就会出现错误并且计算将停止运行，打破反应性）。请注意，不应使模板的呈现依赖于反应变量 - 它应始终呈现，但仅基于modalVisible会话变量的值可见。

如果这对您的用例来说太简单了，请为此道歉 - 如果是这样，我建议调查several packages on Atmosphere的Bootstrap模式，因为其他人几乎肯定会遇到同样的问题。

无法在Meteor模板中触发模态对话框显示

1 个答案: