Knockout - odc. 6

Dziś dalsza część uzupełnień do odcinka nr.2 o Knockout, a konkretnie - dodatkowe informacje o szablonach.

Szablony - uzupełnienia

Rodzaje

• natywne
• Wsparcie dla popularnych engines
  • jQuery
  • Underscore

<div data-bind=”template: {name: ‘totalsTmpl’}”>

</div>

<div id=”totalsTmpl” style=”display: none”>

<span data-bind=”text: lines().length”></span>

<p data-bind=”if:  lines().length > 0”>

      ….

</p>

</div>

Zmiana kontekstu

<div data-bind=”with: model”>

<div data-bind=”text: brand”></div>

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

</div>

Konteksty

my.vm = function() {

products = ko.observableArray([]),

lines = ko.observableArray([]),

removeLine = function (line) { …}

}

<tbody data-bind=”template:  {name: ‘productsTmpl’, foreach: lines}”></tbody>

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

<tr>

          <td>

                      <select data-bind=”options: $root.products, …”></select>

          </td>

          <td>

                      <a href=”#” data-bind=”click: $parent.removeLine”>Remove</a>

          </td>

</tr>

</script>

Natywny engine dla szablonów

• Szablony wewnątrz elementów DOM
• <script>
• inne, np. <div>
• Szablony anonimowe / inline
• skróty: if, ifnot, with, foreach

Skróty dla anonimowych

<div data-bind=”template: {if: isSelected}”>

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

</div>

<div data-bind=”if: isSelected”>

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

</div>

<div data-bind=”template:  {if:  selectedItem, data: selectedItem}”>

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

</div>

<div data-bind=”with: selectedItem”>

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

</div>

Dynamiczna podmiana szablonów

my.vm.templateChoice = function() {

return  warunek  ?  “template1”  :  “template2”;

};

<div data-bind=”template: {name: templateChoice}”>

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

…

</script>

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

…

</script>

Helpery dla template binding

Parametry

• name
• foreach
• data
• afterRender - callback wywoływany po wyrenderowaniu elementów DOM !
• afterAdd - callback wywoływany po dodaniu elementów DOM do drzewa !
• beforeRemove - callback wywoływany przed usunięciem elementów DOM z drzewa !

Co nam mogą dać takie callbacki?  Otóż pozwolą np. na dodanie efektów i animacji przed dodaniem lub usunięciem elementu z drzewa. BTW podobną funkcjonalność polegającą na definiowaniu dedykowanych stanów wizualnych wprowadzono w listach Silverlight 4.

<ul data-bind=”template:  {

  name:  ‘productTemplate’,

  foreach:  model().Products(),

  beforeRemove:  function(elem) { $(elem).slideUp() },

  afterAdd:  function(elem) { $(elem).hide().slideDown() } }”>

</ul>

my.vm = function() {

products = ko.observableArray([]),

hideProduct = function (elem) {

      if (elem.nodeType === 1) {

              $(elem).hide().slideDown();

      }

},

showProduct = function (elem) {

      if (elem.nodeType === 1) {

               $(elem).slideUp(function() {

                       $(elem).remove();

               });

      }

}

}

<ul data-bind=”template: {

name: ‘productTemplate’,

foreach: products,

beforeRemove:  hideProduct},

afterAdd:  showProduct}”>

</ul>

Zewnętrzne szablony

Knockout.js-External-Template-Engine

$(function() {

infuser.defaults.templateSuffix = “.tmpl.html”;

infuser.defaults.templateUrl = “/templates”;

});

productDetails.tmpl.html:

<div data-bind=”with: model” >

…

</div>

<!-- ko template: {name: ‘productDetails’, data: selectedItem} -->

<!-- /ko -->

Automatyczne pobieranie i ładowanie

Można też jawnie zdefiniować url dla szablonu

<!-- ko template: {name: ‘productDetails’, templateUrl: ‘/templates/products’ } -->

<!-- /ko -->