javascript - 在 jQuery UI 小部件中更改深度选项

Question

在创建 jQuery 小部件后更改深度嵌套选项的最佳方法是什么？

$.widget("test.widget1", {
    options: {
        deepOption: {
            prop1: false,
            prop2: false
        }
    },
    _create: function() {

    },
    _init: function () {
        this.element.append('<br>' + this.options.deepOption.prop1 + " " + this.options.deepOption.prop2);
    }
})
$("#one").widget1();

$("#one").widget1({
    deepOption: {
        prop1: true
    }
});​

上面的代码将prop1选项更改为 true 和 nukes prop2。如何prop1在保留prop2.

这是一个 jsFiddle 。

编辑： 我想出了一个解决方案，但它似乎有点像黑客。这是做我想做的最好的方法吗？

$.widget("test.widget1", {
    options: {
        deepOption: {
            prop1: false,
            prop2: false
        }
    },
    _create: function() {

    },
    _init: function () {
        this.element.append('<br>' + this.options.deepOption.prop1 + " " + this.options.deepOption.prop2);
    },
    _setOption: function (key, value) {
        switch(key) {
            case 'deepOption':
                value = $.extend({}, this.options.deepOption, value);                
                break;            
        }

        $.Widget.prototype._setOption.apply(this, arguments);
    }
})
$("#one").widget1();

$("#one").widget1({
    deepOption: {
        prop1: true
    }
});​

这是更新的 jsFiddle。

Answer 1

已.option()在 jQuery UI 1.9 中扩展以支持设置部分嵌套选项，如更改日志中所述。

要在创建小部件后更改此类选项，您现在可以使用：

$("#one").widget1('option', 'deepOption.prop1', true);

jsFiddle