有一个 jquery 方法调用一个 jqueryui 小部件方法答案

【问题标题】：Have a jquery method call a jqueryui widget method有一个 jquery 方法调用一个 jqueryui 小部件方法
【发布时间】：2013-06-04 08:40:51
【问题描述】：

我使用小部件工厂创建了一个名为“Picklist”的 jQueryUI 小部件。它工作得很好。但是，因为它是一个小部件，所以它不会响应 val() 方法。

我有一个函数循环遍历数组以将数据分配给 Web 控件。在大多数情况下，我可以只使用 jQuery 方法 val() 来分配值。但这不适用于我的小部件。

我必须手动检查控件上是否存在小部件，然后调用小部件版本的 val() 来执行分配。这似乎非常低效，与良好的面向对象设计背道而驰。

    for (var i = 0; i < ControlData.length; i++)
    {
        var mapping = ControlData[i];
        $('#' + mapping.controlName).val(mapping.value);
        if ($('#' + mapping.controlName).data('Erik-Picklist'))
        {
            $('#' + mapping.controlName).Picklist("option", { val: mapping.value });
        }
    }

有没有办法让 val() 映射到某个元素上的小部件方法？我在想可能有一种方法可以调用元素，将 val() 方法映射到 Picklist 的 val() 方法，但我还没有看到任何此类示例。

【问题讨论】：

标签： jquery jquery-ui oop jquery-ui-widget-factory

【解决方案1】：

由于没有人回应，（这将教会我在星期五晚上发布问题）我花了很多时间试图找出一种方法来做到这一点。我能想到的最佳解决方案是受到https://stackoverflow.com/a/5760684/594602的启发

基本上，覆盖现有的 val() 函数，以便它检查当前元素上的覆盖。

$.fn.old_val = $.fn.val;
$.fn.val = function ()
{
    var ErikVal = this.data('ErikVal');
    if (ErikVal)
    {
        return ErikVal.apply(this, arguments);
    }
    else
    {
        return this.old_val.apply(this, arguments);
    }
};

在 jQueryUI 小部件的 _create() 中，我添加了以下内容：

_create: function ()
{
    ...
    this.element.data('ErikVal', function ()
    {
        this.Picklist("option", { val: arguments[0] });
    });
},

我对此并不特别自豪，但它确实有效。

【讨论】：