observables 的值相互依赖 - 循环引用

Question

可能是一个淘汰新手的问题。这周才开始学knockout

我有两个 observables - 宽度和高度。这些值最初是通过抓取点击元素的宽度和高度来设置的，因此这部分不需要计算。问题是，一旦捕获了初始值，我想为所有未来的变化保持纵横比。因此，如果用户更新宽度，我希望高度根据纵横比（原始宽度/原始高度）更新。所以当用户改变宽度时，高度必须改变，反之亦然。

我已经尝试过使用订阅者进行此操作，但这会导致您可能预料到的无限循环，因为宽度的任何变化都需要高度的变化，反之亦然。我已经研究了计算的可观察量和扩展器，但我不确定哪一个是正确的答案，尽管这可能是由于我在淘汰赛方面的经验有限。

如有必要，我可以提供一些代码，但我认为如果可能的话我会尽量保持概念化。只是指出我正确道路的东西。

感谢您的帮助！

Answer 1

与任何循环依赖一样，您必须打破循环。与其拥有两个相互依赖的可观察对象，不如让它们依赖于一个或多个共同的可观察对象。可以保持该比率的 Observables。

例如，

function Proportional (width, height) {
    var _ratio = width / height,
        _width = ko.observable(width),
        _height = ko.observable(height);

    this.width = ko.dependentObservable({ read: _width, write: setWidth });
    this.height = ko.dependentObservable({ read: _height, write: setHeight });

    function setWidth(width) {
        _width(width);
        _height(width / _ratio);
    }
    function setHeight(height) {
        _height(height);
        _width(height * _ratio);
    }
}

function ViewModel(data) {
    var p = new Proportional(data.width, data.height);
    this.width = p.width;
    this.height = p.height;
}

fiddle

observables 的值相互依赖 - 循环引用

observables dependent on one another for their own values - circular references

javascript

knockout.js