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并将核心prop2更改为。如何在保留prop1的同时更改prop2。

Here is a jsFiddle for this.

编辑：我提出了一个解决方案，但它看起来像是一种黑客攻击。这是我做我想做的最好的方式吗？

$.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
    }
});

Here is the updated jsFiddle.

Answer 1

在jQuery UI 1.9中扩展了.option()以支持设置部分嵌套选项，如changelog中所述。

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

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

jsFiddle

在jQuery UI Widget中更改深层选项

1 个答案: