Knockout.js knockoutjs子对象在父对象中触发更改

Knockout.js knockoutjs子对象在父对象中触发更改,knockout.js,parent,subscribe,computed-observable,Knockout.js,Parent,Subscribe,Computed Observable,有没有一种更简单的方法可以让父对象的“订阅”通过更改任何较低级别的可观察对象来激发 下面的代码和示例fiddle正在工作,但它要求我在optionSet中复制主选项。这个较小的版本是可管理的,但我的主选项集可能会变得相当大,这将使主选项和optionSet的维护变得困难且容易出错 示例JSFIDLE可在此处找到: html: 我不想将masterOptions重新创建为optionSet,但我不知道如何在任何较低级别的观测值发生变化时使用单一订阅激发。您可以尝试使用。我不确定我的解决方案是否是最

有没有一种更简单的方法可以让父对象的“订阅”通过更改任何较低级别的可观察对象来激发

下面的代码和示例fiddle正在工作,但它要求我在optionSet中复制主选项。这个较小的版本是可管理的,但我的主选项集可能会变得相当大,这将使主选项和optionSet的维护变得困难且容易出错

示例JSFIDLE可在此处找到:

html:

我不想将masterOptions重新创建为optionSet,但我不知道如何在任何较低级别的观测值发生变化时使用单一订阅激发。

您可以尝试使用。我不确定我的解决方案是否是最好的,但您可以看看:

HTML


在计算机中的masterOptions上调用ko.toJS可以实现以下功能:

var optionSet = ko.computed(function () {
    return ko.toJS(masterOptions);
});

这会对结构中的每个可见项产生依赖性。此外,添加到其中的任何可观测项都将作为依赖项包含

然而,如果您想直接订阅MaskOrthOpand和/或需要更多的灵活性,您可以考虑使用这个方便的小插件,我为自己编写的目的几乎相同:


当它只是返回
主选项中的任何内容时,使用
optionSet
有什么意义?您不必“详细地”复制它们。。。你可以做到的。但正如前面所说的,还不太清楚你想要实现什么。描述这一点,它可能有助于通过另一种方法回答您的问题。拥有optionSet对象的唯一意义是,我可以让obptionSet.subscribe函数在较低级别的观察值发生任何变化时启动。我还没有找到一种方法来调用subscribe中的函数,而不创建optionSet对象。
var masterOptions = {
    group1: {
        setting1a: ko.observable("value1a"),
        setting1b: ko.observable("value1b")
    },
    group2: {
        setting2a: ko.observable("value2a"),
        setting2b: ko.observable("value2b")
    }
};
var optionSet = ko.computed(function () {
    return {
        group1: {
            setting1a: masterOptions.group1.setting1a(),
            setting1b: masterOptions.group1.setting1b()
        },
        group2: {
            setting2a: masterOptions.group2.setting2a(),
            setting2b: masterOptions.group2.setting2b()
        }
    };
});
optionSet.subscribe(function () {
    //alert("Make some magic happen.");
    $("#mySpan").html($("#mySpan").html() + "more magic. ");
});
var ViewModel = function () {
    return {
        masterOptions: masterOptions,
        optionSet: optionSet
    };
};

ko.applyBindings(new ViewModel());
<div>
    Setting1a: <input data-bind="value: masterOptions().group1.setting1a" /><br />
    Setting1b: <input data-bind="value: masterOptions().group1.setting1b" /><br />
    Setting2a: <input data-bind="value: masterOptions().group2.setting2a" /><br />
    Setting2b: <input data-bind="value: masterOptions().group2.setting2b" /><br />
    <br />
    span: <span data-bind="text: json"></span><br/>
    <br />
    span2: <span data-bind="text: magicString"></span>
</div>
var anyData = {
    group1: {
        setting1a: ko.observable("value1a"),
        setting1b: ko.observable("value1b")
    },
    group2: {
        setting2a: ko.observable("value2a"),
        setting2b: ko.observable("value2b")
    }
};

var ViewModel = function (data) {
    var magicString = ko.observable("");

    var masterOptions = ko.computed(function() {
        return ko.mapping.fromJS(data);
    });
    masterOptions.subscribe(function () {
        magicString(magicString() + "more magic. ");
    });

    var json = ko.computed(function() {
        return ko.mapping.toJSON(masterOptions);
    });

    return {
        masterOptions: masterOptions,
        magicString: magicString,
        json: json
    };
};

ko.applyBindings(new ViewModel(anyData));
var optionSet = ko.computed(function () {
    return ko.toJS(masterOptions);
});