Knockout - odc. 1

Pora na zmierzenie się z frameworkiem Knockout. Mam nadzieję, że nie zostanę znokoutowany w znaczeniu walki na ringu, natomiast ideowo jestem na tak -;)  Mnie, jako osobie wywodzącej się z WPF, Silverlight i jemu podobnych w gołym HTML i JavaScript od zawsze brakowało data bindingów, co nie sprzyja stosowaniu podejścia MVVM w aplikacjach JavaScript.  Jednak Knockout, czasami w połączeniu z jQuery pozwala - mimo różnic technologicznych - pisać aplikacje w podobny sposób, pozwalając na rozwiązanie tych samych zagadnień w podobny sposób, zazwyczaj z podejściem deklaratywnym. Wsparcie dla data bindingów i bardzo wiele ma ułatwień ma też biblioteka WinJS, ale do niej jeszcze powrócę przy tworzeniu aplikacji Metro w HTML5 dla Windows 8. Dziś zaś pierwszy odcinek o ogólno-webowym Knockout, a w nim trochę notatek z pierwszym przykładem użycia oraz przegląd obiektów observable. Myślę, że analogie do aplikacji MVVM w XAML narzucają się same.

Właściwości

• MVVM
• Deklaratywny data binding
• Automatyczne odświeżanie UI
• Szablony

<input type=”text” data-bind=”value: user, valueUpdate: ‘afterkeydown’” />

<span data-bind=”text: user, visible: userVisible”></span>

<button data-bind=”click: changeUser”>Change</button>

$(function() {

var viewModel = {

        user:  ko.observable(“marcin”),

        userVisible:  ko.observable(true),

        changeUser: function() {

              this.user(“emka”);  

        }

};

ko.applyBindings(viewModel);

});

• http://knockoutjs.com
• http://blog.stevensanderson.com/
• http://www.knockmeout.net/

 

Observables

var user = viewModel.user();  //odczyt

viewModel.user(“emka”);  //zapis

Rodzaje

• observable (dla properties view modelu)
• observable arrays (dla kolekcji)
• dependent observables (zawierają w sobie 1 lub więcej elementów observable)

Dependent observables

var viewModel = {

firstName: ko.observable(“Marcin”),

lastName: ko.observable(“Ka”)

};

viewModel.fullName = ko.dependentObservable(function() {

return this.firstName() + “ “ + this.lastName();

}, viewModel);

Observable arrays

Metody Knockout dla observable array

• list.indexOf(“value”)
• list.slice(3,5)  //usuwa elementy pomiędzy
• list.push(“value”)
• list.pop()
• list.unshift(“value”) //wstawia jako pierwszy
• list.shift() //usuwa pierwszy
• list.reverse()
• list.sort()
• list.remove(item)
• list.removeAll()

var data = [ {name: “Knż”}, {name: “Luxtorpeda”},  {name: “Abradab”} ];

var viewModel = {

artists: ko.observableArray(data),

addArtist: function() {

         this.artists.push({ name: “RPS”});

},

removeArtist: function() {

          this.artists.pop();

}

};

<ul data-bind=”template:  { name: ‘listTemplate’, foreach: artists }”></ul>

<script id=”listTemplate” type=”text/html”>

<li data-bind=”text: name”></li>

</script>