Data binding 淘汰-交叉输入绑定/可观察

我想创建一个可观察的绑定，就像图像大小计算一样。经过几天的自我尝试，我感到沮丧。也许有人能帮我。 该视图有两个带数字的输入字段。假设第一个800和第二个600。当我更改第一个输入字段中的数字时，第二个输入字段也应该更新，但需要计算比例大小。因此，对于这个任务，我需要第一个输入字段中的新旧值，并使用第二个输入字段中的值进行计算。然后将结果传递到第二个输入字段。这也应该适用于vista verca

编辑：经过一段距离后，我想我找到了一个可行的解决方案。下面是我发布的代码，因此当有人提出改进建议时，欢迎您：

// View has custom binding handler 'dimensionBinding' bound to an observable. Additional it put the contrary observable to the allBindings object.
 <input data-bind="dimensionBinding: valueHeight, contrary: valueWidth" type="number" >
 <input data-bind="dimensionBinding: valueWidth, contrary: valueHeight" type="number" >

    // viewModel
        self.valueHeight = ko.observable(800);
        self.valueWidth = ko.observable(600);

    // bindingHandlers
    ko.bindingHandlers.dimensionBinding = {
        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

// get the initially value from the observable and put it into the view        
$(element).val( ko.unwrap(valueAccessor()) );
        $(element).on('change', function(event) {
            // get the value from the contrary input field
            const contraryValue = ko.unwrap(allBindings.get('contrary')); 
            // get the value from this input before change
            const valueBeforeChange = ko.unwrap(valueAccessor()); 
            // get the new value from this input field
            const newValue = event.target.value; 
            // calc proportional and set the returning value to the contrary observable
            allBindings.get('contrary')( contraryValue / valueBeforeChange * newValue)
            valueAccessor()(newValue)    
        });
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        const value = ko.unwrap(valueAccessor());
        // update the view
        $(element).val(value);
    }
};

//视图将自定义绑定处理程序“dimensionBinding”绑定到可观察对象。另外，它使allBindings对象具有相反的可观察性。
//视图模型
self.valueHeight=ko.可观察（800）；
self.valueWidth=ko.可观察（600）；
//绑定处理程序
ko.bindingHandlers.dimensionBinding={
init：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
//从可观察对象中获取初始值并将其放入视图中
$（element.val）（ko.unwrap（valueAccessor（））；
$（元素）.on（'change'，函数（事件）{
//从相反的输入字段中获取值
const contracryvalue=ko.unwrap（allBindings.get（'contract'）；
//更改前从该输入获取值
const valueBeforeChange=ko.unwrap（valueAccessor（））；
//从该输入字段获取新值
const newValue=event.target.value；
//计算比例并将返回值设置为相反的可观察值
all bindings.get（'contract'）（contracryvalue/valueBeforeChange*newValue）
valueAccessor（）（newValue）
});
},
更新：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
const value=ko.unwrap（valueAccessor（））；
//更新视图
$（元素）.val（值）；
}
};