可以.Control.defaults和options合并答案

【问题标题】：can.Control.defaults and options merging可以.Control.defaults和options合并
【发布时间】：2013-09-22 22:57:01
【问题描述】：

使用 can.js 我有这个控制：

var Test_Controller = can.Control({
    defaults: {
        option1: 'option1',
        option2: 'option2',
        option3: {
            nested1: 'nested1',
            nested2: 'nested2',
            nested3: 'nested3'
        }
    }
}, {
    init: function() {
        if ($(this.element).attr('data-newtext')) {
            this.options.option3.nested2 = $(this.element).data('newtext');
        }

        $(this.element).text(this.options.option3.nested2);
    }
});

.. 这个标记：

<div class="instance1" data-newtext="newtext"></div>
<div class="instance2"></div>

..那么如果我像这样创建该控件的实例：

var instance1 = new Test_Controller('.instance1', {});
var instance2 = new Test_Controller('.instance2', {});

我希望看到的是 2 个 div，一个插入了单词 newtext，另一个插入了单词 nested2，但我实际看到的是插入了单词 newtext 的 2 个 div。

如果我更改我的选项对象，使其不使用嵌套，而是将所有选项放在顶层，那么我没有问题。

因此，在将选项与默认值合并时，canJS 似乎无法正确合并嵌套对象。是这样吗？有没有人有任何聪明的想法，我如何能够在不分叉的情况下支持这个功能？还是我错过了一些明显的东西？如果我能做到这一点，我就不必编写大量费力的选项创建代码了。

【问题讨论】：

似乎 can.js 在某些时候将默认值与实例选项合并，但不会进行深层复制。如果您可以从您的 init 函数访问默认对象，那么您可以自己进行深度复制，或直接使用它

标签： javascript javascript-framework canjs canjs-control

【解决方案1】：

正如@tikider 所指出的，can.extend 使用库本机 .extend（在大多数情况下可能是 $.extend），默认情况下不会进行深度克隆。但是，您应该能够覆盖 Controls setup 并进行深度扩展：

var Test_Controller = can.Control({
    defaults: {
        option1: 'option1',
        option2: 'option2',
        option3: {
            nested1: 'nested1',
            nested2: 'nested2',
            nested3: 'nested3'
        }
    }
}, {
    setup: function( element, options ) {
        var allOptions = $.extend(true, {}, this.constructor.defaults, options);
        return can.Control.prototype.setup.call(this, element, allOptions);
    },

    init: function() {
        if (this.element.attr('data-newtext')) {
            this.options.option3.nested2 = this.element.data('newtext');
        }

        this.element.text(this.options.option3.nested2);
    }
});

【讨论】：