Связывание данных внутри объекта и с DOM

Это предельное упрощение того, что я хочу построить (калькулятор процентов по процентам). У меня три поля. Всякий раз, когда одно поле изменилось, я хочу, чтобы другие, чтобы изменить для того, чтобы удовлетворить это алгебраическое уравнение:Связывание данных внутри объекта и с DOM

A = B * C 
B = A/C 
C = A/B

Я думаю, что я хочу, чтобы связать эти значения с объектом, но я не уверен, как идти об этом , Вот это настроить я до сих пор:

var binder = { 
    a: 2, 
    b: 1, 
    c: 1 
}; 

$('input[type=number]').on('change', function() { 
    var id = $(this).attr('id'); 
    var value = id.val(); 
    binder[id] = Number($(this).val());  
});

На данный момент я установить соответствующий ключ в объекте к значению текущего активного поля. Я мог работать через кучу case() утверждений типа:

switch(id) { 
    case a : 
    binder.b = $(this).val()/binder.c; 
    binder.c = $(this).val()/binder.b; 
    break; 
    etc. 
}

Я также необходимо обновить значения полей. Это кажется неустойчивым, особенно когда число полей растет, и вычисление становится более сложным. Мой вопрос тогда двоякий:

Как связать значения полей с объектом?

Как связать значения объекта друг с другом?

источник

2016-07-21 icicleking

Есть ряд библиотек, которые обрабатывают сантехнику для такого рода вещи. Я поклонник Knockout.js, http://knockoutjs.com/, который использует ViewModels для привязки к вашим элементам DOM и предоставления логики поддержки. Просто создайте объекты, необходимые для обработки вычислений, и пусть KO справится с привязкой. – dbugger

Как @dbugger прокомментировал knockoutjs идеально подходит для этой

var model = { 
 
    a: ko.observable(2), 
 
    b: ko.observable(1), 
 
    c: ko.observable(1) 
 
}; 
 

 
ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
A <input data-bind="value: a, valueUpdate: 'afterkeydown'"> = (B x C) <span data-bind="text: b()*c()"></span><br /> 
 
B <input data-bind="value: b, valueUpdate: 'afterkeydown'"> = (A/C) <span data-bind="text: a()/c()"></span><br /> 
 
C <input data-bind="value: c, valueUpdate: 'afterkeydown'"> = (A/B) <span data-bind="text: a()/b()"></span><br />

источник

2016-07-23 16:13:42 cstuncsik

Связывание данных внутри объекта и с DOM

ответ

Смежные вопросы