javascript - 如何实现一种方法来更新 jquery 插件中的选项？

Question

我正在尝试调整一个 jquery 插件 (https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js) 来添加一个方法来更新特定的默认设置(提示文本)。

已经提供了一些方法:

var methods = {
    init: function(url_or_data_or_function, options) {
        var settings = $.extend({}, DEFAULT_SETTINGS, options || {});

        return this.each(function () {
            $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings));
        });
    },
    clear: function() {
        this.data("tokenInputObject").clear();
        return this;
    },
    add: function(item) {
        this.data("tokenInputObject").add(item);
        return this;
    },
    remove: function(item) {
        this.data("tokenInputObject").remove(item);
        return this;
    },
    get: function() {
        return this.data("tokenInputObject").getTokens();
    }
}

我添加了这个:

updateHintText: function (hintText) {
     DEFAULT_SETTINGS.hintText = hintText;
} 

这确实会更新它，但是，它不适用于已创建的实例。例如，我这样调用这个方法:

$("#textbox1").tokenInput("updateHintText", 'updated hint');

但是下次显示提示下拉时，还是显示原来的提示:

function show_dropdown_hint () {
    if(settings.hintText) {
        dropdown.html("<p>"+settings.hintText+"</p>");
        show_dropdown();
    }
}

因此，即使 DEFAULT_SETTINGS.hintText 得到更新，settings.hintText 仍然引用在实例化插件时传入的原始设置——这确实有意义。

那么，您将如何更改我的 updateHintText() 方法以便 settings.hintText 返回新设置？现在我所做的解决方法是创建一个新变量来保存新的设置值，并修改 show_dropdown_hint() 方法以使用这个新变量而不是 settings.hintText 如果它是非空的。但我更愿意只使用设置对象。

谢谢。

Answer 1

这似乎是因为您附加到默认设置，而不是从 init 函数中的这一行扩展的实际设置哈希。

var settings = $.extend({}, DEFAULT_SETTINGS, options || {});

问题在于此设置散列超出了您的方法范围，因此您无法访问它。

尝试将设置的实例化移到 init 方法之外，以便您可以访问它。然后你可以使用你的函数来修改它:

// Additional public (exposed) methods
var settings = {};
var methods = {
init: function(url_or_data_or_function, options) {
    settings = $.extend({}, DEFAULT_SETTINGS, options || {});

    return this.each(function () {
        $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings));
    });
},
updateHintText: function (hintText) {
     settings.hintText = hintText;
}
//..other methods...