javascript - 关闭在另一个事件函数中创建的模态

Question

在我的第一个事件中，我将打开一个 mbox 对话框。 mbox 是 bootbox 的一种扩展，用于显示模态。我需要 mbox 将另一个模板用作模态内容。

所以在modal中会加载createElement-Template的内容。如果用户进行了一些输入更改，则应关闭模态。因此就有函数modal("hide")。 但是由于 bbox 是在第一个模板事件中设置的，而模态的关闭将在第二个模板事件中完成，我在关闭模态时遇到了问题。

事件

Template.main.events({
    'submit form': function(event, template) {
        event.preventDefault();

        var bbox = mbox.dialog({
            title: 'title',
            message: Template.createElement
        });
    }
});

Template.createElement.events({
    'change input': function(event, template) {
        bbox.modal('hide');
    }
});

更新

上述问题适用于全局变量。感谢亚当。

但我不想破坏 meteor 包中的模态，它是由另一个包创建的。我尝试使用全局变量并尝试使用 api.export()。但它仍然不起作用。我还尝试使用 Sessions。

package-graph/lib/client/graph.js

var bbox;
CanvasManager = {
    onShowAddToolTip (element) {
        bbox = mbox.dialog({ // <-- Create Modal
            title: "Title",
            message: Template.search, // <-- Loading Template search with just one input field with typeahead
        });
    },
}

CanvasManger.create(...);

package-graph/lib/package.js

api.export('bbox');

第二个包提供了一个预输入搜索框(sergeyt:typeahead)。通过在第一个包中创建模态，模板将加载到模态 (helloludger:mbox) 中。现在用户可以通过预先输入进行搜索并选择一个项目。选择后，模态应由 `modal('hide') 销毁。

package-search/lib/client/events.js

Template.searchMain.onRendered(function() {
    Meteor.typeahead.inject();
});

package-search/lib/client/helper.js

Template.search.helpers({ // <-- getting the data for the input typeahead
    searchData: function() {
        return [
            {
                name: 'cat1',
                valueKey: 'title',
                displayKey: 'title',
                header: '<h3 class="category-name">Category</h3>',
                template: 'searchResults',
                local: function() {
                    return Collection.find().fetch();
                }
            }
        ]
    },
    selected: function(event, suggestion) { // <-- by selecting an item, I can process the data and remove the modal
            // do something
            bbox.modal('hide'); // <!-- destroy modal
            return;
        }
    }
});

Answer 1

使bbox成为全局变量:

var bbox;
Template.main.events({
    'submit form': function(event, template) {
        event.preventDefault();

        bbox = mbox.dialog({
            title: 'title',
            message: Template.createElement
        });
    }
});

Template.createElement.events({
    'change input': function(event, template) {
        bbox && bbox.modal('hide');
    }
});