Knockout - odc. 2

Knockout ma niezłe możliwości. W tym odcinku o predefiniowanych data bindingach. Znajdziemy tutaj wiele oczywistych analogii do aplikacji XAML.

Rodzaje

• wbudowane
• text i wygląd
• formularze
• przepływ kontroli
• szablony
• własne

Bindingi wbudowane - text i wygląd

• visible
• text
• html
• css  (klasa/y)
• style
• attr  (każdy narzucony argument)

Bindingi wbudowane - formularze

• click
• event (każde narzucone zdarzenie)
• submit
• enable
• disable
• value
• checked (dla checkbox i radio button)
• options (kolekcja elementów w dropdown lub multi-select)
• selectedOptions (zaznaczony element lub elementy w dropdown lub multi-select)
• uniqueName (zapewnia, że element ma atrybut “name”)

Bindingi wbudowane - przepływ kontroli

• if
• ifnot
• foreach
• with (wykonanie dla wskazanego obiektu)

Bindingi wbudowane - szablony

• tradycyjne szablony w tagu <script> (jQuery) //old-school
• kontrola przepływu bez kontenera (anonimowe) (składnia: bezszablonowa, bazująca na komentarzu)

Nuget

///<reference path=”” />

<div data-bind=”template:  ‘tagsTempl’”/>

<script id=”tagsTempl” type=”text/html”>   //szablon jQuery

<ul>

         {{each tags}}

                  <li>

                                <span>${Name} ${(new Date).toLocaleTimeString()}</span>                               

                  </li>

         {{/each}}

</ul>

</script>

Dla nowo dodanego elementu ta sama data

Lepiej:

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

<script id=”tagsTempl” type=”text/html”> //szablon jQuery

<li>

         <span>${Name} ${(new Date).toLocaleTimeString()}</span>

</li>

</script>

<script id=”tagsTempl” type=”text/html”> //szablon bez jQuery

<li>

<span data-bind=”text: Name”></span>

</li>

</script>

Szablon anonimowy w oparciu o komentarz:

<ul>

<!-- ko  foreach: tags -->

<li>

<span data-bind=”text: Name”></span>

</li>

<!--/ko -->

</ul>

Wersja bez komentarza:

<ul data-bind=”foreach: tags”>

<li>

<span data-bind=”text: Name”></span>

<div>

          <a href=”#” class=”tag-delete” data-bind=”click: function() { viewModel.tags.remove(this) }”>Delete</a> //słabe

</div>

</li>

</ul>

W przypadku przypinania zdarzeń do szablonu lepiej skorzystać z jQuery:

$(document).on(“click”, “.tag-delete”, function() {

var itemToRemove = ko.dataFor(this);

viewModel.tags.remove(itemToRemove);

});

Edytowanie elementu

Do view modelu dodajemy:

selectedTag: observable(null);

selectTag: function() {

viewModel.selectedTag(this);

}

<li data-bind=”click: $parent.selectTag”>  //bindowanie do rodzica (poziomu itemu)

<span data-bind=”text: Name”></span>

<div>

<a href=”#” class=”tag-delete”>Delete</a>

</div>

</li>

Konteksty w parent bindingach:

• $data - aktualnie zbindowane dane do elementu
• $parent - element z kontekstu parent bindingu
• $parents - tablica zawierająca wszystkie konteksty parent bindingów (rodzice, dziadkowie, różne poziomy)
• $root - element na szczycie bindingu

Użycie bindingu do wskazanego elementu:

<div id=”dialog” data-bind=”with:  selectedTag”>  //okno dialogowe dla zaznaczonego elementu

<input type=”text” data-bind=”value: Name”/>

</div>

Na początku #dialog ukrywamy, a do każdego kliknięcia przycisku ‘edit’ na każdym elemencie listy tworzymy okno dialogowe korzystając z jQuery.

Aby odświeżały się properties na elementach w observable array, każdy element musi składać się z obiektów observable, np.

var data = [

new tagItem(“Windows 8”, 1),

new tagItem(“Metro”, 2),

];

function tagItem(name, id) {

return {

       Name: ko.observable(name),

       Id: ko.observable(id)

};

}