<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <label>Please introduce yourself</label> <input type="text" data-bind="value: firstName"></input> <input type="text" data-bind="value: lastName"></input> <strong>Hello,</strong> <strong data-bind="text: firstName"></strong> <strong data-bind="text: lastName"></strong> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> <script src="scripts/myscript.js"></script> </body> </html>
W widoku, deklaracja bindingu zachodzi poprzez atrybut data-bind z wartościami property elementu z widoku i elementu z viewmodelu.
function AppViewModel() { this.firstName = ko.observable(""); this.lastName = ko.observable(""); } ko.applyBindings(new AppViewModel());
W viewmodelu tworzemy properties o typie ko.observable (jako argument podaje się wartość domyślną). Wartość w przypadku kontrolek typu input będzie aktualizowana w momencie, gdy kontrolka straci focus.
Dodatkowo możemy bindować się do właściwości wyliczanych za pomocą pewnej logiki. W widoku należy dodać nowy element, również bindowany do property.
<p>Full name length: <strong data-bind="text: fullNameLength"></strong></p>
W viewmodelu należy zdefiniować property jako ko.computed z funkcją zwracającą wyliczoną wartość. Aktualizacja następuje w momencie zmiany dowolnej zależności.
function AppViewModel() { //pozostale properties this.fullNameLength = ko.computed(function() { console.log('computing...'); var f = this.firstName(); var l = this.lastName(); return f.length+l.length; }, this); } ko.applyBindings(new AppViewModel());
Brak komentarzy:
Prześlij komentarz