javascript - 如何将 jQuery UI 小部件传递到函数中?

标签 javascript jquery jquery-ui

我有两个函数,它们对两种不同的小部件类型执行相同的操作。我以为我已经找到了一种实现方式,可以让我使用一个通用函数而不是两个。我的想法是,我将每种类型的小部件传递到这个通用函数中。然而,我在细节上遇到了困难:

这是我的两个函数,它们重复了很多代码:

buildTemplateLookupTreeDialog: function () {
    lookupTreeViewDialog.bind('loaded.jstree', function () {
        var templateID = workflowDialogContent.find('#DeviceTemplateID').val();
        lookupTreeViewDialog.TemplateLookupTree('setSelectedNode', '#' + templateID);
        lookupTreeViewDialog.TemplateLookupTree('saveCookie');
    }).TemplateLookupTree();

    lookupTreeViewDialog.TemplateLookupTree('onNodeDblClick', function (template) {
        if (openDialog != null) {
            openDialog.TemplateLookupTree('saveCookie');
            openDialog.data('result', { id: template.id, name: template.name });
            openDialog.dialog('close');
        }
    });
},
buildComponentLookupTreeDialog: function () {
    lookupTreeViewDialog.bind('loaded.jstree', function () {
        var componentID = workflowDialogContent.find('#DeviceComponentID').val();
        lookupTreeViewDialog.ComponentLookupTree('setSelectedNode', '#' + componentID);
        lookupTreeViewDialog.ComponentLookupTree('saveCookie');
    }).ComponentLookupTree();

    lookupTreeViewDialog.ComponentLookupTree('onNodeDblClick', function (component) {
        if (openDialog != null) {
            openDialog.ComponentLookupTree('saveCookie');
            openDialog.data('result', { id: component.id, name: component.name });
            openDialog.dialog('close');
        }
    });
}

这是我认为通用实现的样子:

buildGenericLookupTreeDialog: function (lookupTreeWidget, title, idSelector, nameSelector) {
    lookupTreeViewDialog.bind('loaded.jstree', function () {
        var selectedNodeID = workflowDialogContent.find(idSelector).val();
        lookupTreeViewDialog.lookupTreeWidget('setSelectedNode', '#' + selectedNodeID);
        lookupTreeViewDialog.lookupTreeWidget('saveCookie');
    }).lookupTreeWidget();

    lookupTreeWidget('onNodeDblClick', function (node) {
        if (openDialog != null) {
            lookupTreeWidget('saveCookie');
            openDialog.data('result', { id: node.id, name: node.name });
            openDialog.dialog('close');
        }
    });
}

//Called like so
this.buildGenericLookupTreeDialog(TemplateLookupTree, 'Select Template', '#DeviceTemplateID', '#DeviceTemplateName');

现在,这段代码立即抛出一个错误——TemplateLookupTree not Defined。看来我无法通过名称引用小部件,除非我实际初始化它(例如,lookupTreeViewDialog.TemplateLookupTree());

如果我在传递到 buildGenericLookupTree 之前初始化 TemplateLookupTree - 每当像函数一样使用 LookupTreeWidget 时,我都会收到错误。

关于如何干燥此代码有什么建议吗?

最佳答案

将查找树小部件名称作为字符串传递,并查看此线程以获取有关如何调用它的信息: How to execute a JavaScript function when I have its name as a string

关于javascript - 如何将 jQuery UI 小部件传递到函数中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12983159/

相关文章:

javascript - 无法在 Vuetify v-alert close 上触发功能

javascript - 使用 javascript/jQuery 测试数组的函数

javascript - 从客户端浏览器将 Canvas 保存到磁盘上?

javascript - JQuery load() 无法识别 pre php 包含内容

javascript - jQuery 在添加元素之前表现得很奇怪

jQuery - UI 对话框 - 寻找定时关闭的智能解决方案

带圆 Angular 的 jquery ui slider - 较旧的浏览器问题 (.corner)

javascript - 将鼠标悬停在 flot 中的某个点上时显示自定义工具提示

javascript - 图表交互指南默认为光标另一侧的最远值

javascript - 如何防止 jQuery UI 可拖动以增加页面宽度并从 iFrame 拖动到父 HTML