Datenbindung innerhalb eines Objekts und an das DOM

Dies ist eine extreme Vereinfachung von dem, was ich bauen möchte (Darlehen Zinsrechner). Ich habe drei Felder. Jedes Mal, wenn ein Feld geändert wird, möchte ich die andere ändern, um diese algebraische Gleichung zu erfüllen:Datenbindung innerhalb eines Objekts und an das DOM

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

Ich glaube, ich diese Werte mit einem Objekt binden will, aber ich bin nicht sicher, wie dies zu realisieren . Hier ist die Einrichtung ich habe bisher:

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());  
});

An dieser Stelle ich die entsprechende Taste in dem Objekt auf den Wert des aktuell aktiven Bereich festgelegt haben. Ich konnte wie durch ein Bündel von case() Anweisungen ausführen:

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

Ich brauche auch die Feldwerte zu aktualisieren. Dies scheint nicht nachhaltig zu sein, insbesondere wenn die Anzahl der Felder zunimmt und die Berechnung komplexer wird. Meine Frage ist dann zweifach:

Wie binde ich die Werte der Felder an das Objekt?

Wie binde ich die Werte des Objekts aneinander?

Quelle

2016-07-21 icicleking

eine Reihe von Bibliotheken gibt, die die Rohrleitungen für diese Art der Sache umgehen. Ich bin ein Fan von Knockout.js, http://knockoutjs.com/, das ViewModels verwendet, um an Ihre DOM-Elemente zu binden und die Backing-Logik bereitzustellen. Erstellen Sie einfach die Objekte, die Sie für die Berechnungen benötigen, und lassen Sie sich von KO mit der Bindung befassen. – dbugger

Als @dbugger kommentiert knockoutjs für diese perfekt

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 />

Quelle

2016-07-23 16:13:42 cstuncsik

Datenbindung innerhalb eines Objekts und an das DOM

Antwort

Verwandte Themen