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

use*_*695 8 javascript meteor bootbox

在我的第一个活动中,我将打开一个mbox对话框.mbox是bootbox的一种扩展,用于显示模态.我需要mbox使用另一个模板作为模态内容.

因此在模态中将加载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');
    }
});
Run Code Online (Sandbox Code Playgroud)

UPDATE

上述问题适用于全局变量.感谢Adam为此.

但不是我想破坏流星包中的模态,这是由另一个包创建的.我试图使用全局变量,我试图使用api.export().但它仍然无效.我也尝试过Sessions.

包图表/ LIB /客户端/ 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(...);
Run Code Online (Sandbox Code Playgroud)

包图表/ LIB/package.js

api.export('bbox');
Run Code Online (Sandbox Code Playgroud)

第二个包提供了一个typeahead-searchbox(sergeyt:typeahead).通过在第一个包中创建模态,模板将加载到modal(helloludger:mbox)中.现在,用户可以通过预先搜索并选择一个项目.在选择之后,模态应该被`modal('hide')破坏.

包搜索/ LIB /客户端/ events.js

Template.searchMain.onRendered(function() {
    Meteor.typeahead.inject();
});
Run Code Online (Sandbox Code Playgroud)

包搜索/ LIB /客户端/ 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;
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

Ada*_*dam 8

创建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');
    }
});
Run Code Online (Sandbox Code Playgroud)

  • @ user3142695 - 你不能保证此时已经设置了'bbox`(它可能仍然是'undefined`).`bbox && doSomething()`与`if(bbox){doSomething()}`相同,只是一个JavaScript简写 (4认同)