Templating mit Knockout.js

Knockout.js unterstützt das MVVM-Entwurfsmuster von Microsoft und lässt sich sehr gut für das Templating in HTML5-Webprojekten nutzen. Über das data-Attribut lassen sich View-Elemente an ein ViewModel binden, welches die Anzeige dann mit entsprechenden Daten befüllt. Es folgt ein Beispiel für den Einsatz von Knockout.js zum Befüllen von Listen.

HTML-Code:

<ul id="persons" data-bind="foreach: people">
  <li><a href="#" data-bind="text: name, attr: { href: link }"></a></li>
</ul>

Knockout Code:

var element = document.getElementById('persons');
 
var viewModel = {
  people: [
  {
    name: 'Benny Neugebauer',
    link: 'benny.html'
  },
  {
    name: 'Michael Koppen',
    link: 'michael.html'
  },
  {
    name: 'Tamay Gündüz',
    link: 'tamay.html'
  }]
};
 
ko.applyBindings(viewModel, element);

Hat man als Datensatz nur ein Array zur Verfügung und als Datensatz ein nicht benanntes ViewModel, dann kann man mit den Variablen $root und $data arbeiten. Beispiel:

<ul id="persons" data-bind="foreach: $root">
  <li><a href="#" data-bind="html: $data"></a></li>
</ul>

Knockout Code:

$.getJSON('/rest/service/v1/categoryNames', function(data) {
  // Data: ["Benny Neugebauer", "Michael Koppen", "Tamay Gündüz"]
  var element = document.getElementById('persons');
  ko.applyBindings(data, element);
});

Möchte man die Einträge mit roter Schrift anzeigen, so kann man folgendes Binding mit Knockout.js anwenden:

<ul id="persons" data-bind="foreach: $root">
  <li><a href="#" data-bind="html: $data, style: { color: 'red' }"></a></li>
</ul>

Vollständiges Beispiel

<body>
  <ul id="persons" data-bind="foreach: $root">
    <li><a data-bind="attr: { href: $data.link },
                      html: $data.name, 
                      style: { color: 'red' }"></a></li>
  </ul>
</body>
 
<script src="js/knockout-2.3.0.js"></script>
<script>
  // ViewModel with an Observable
  var viewModel = {
    people: ko.observableArray([
      {"name": "one", "link": "one.html"},
      {"name": "two", "link": "two.html"}
    ])
  };
 
  // ViewModel-Binding
  var element = document.getElementById('persons');
  ko.applyBindings(viewModel.people, element);
 
  // ViewModel change that triggers a view update
  viewModel.people.push({"name": "three", "link": "three.html"});
  viewModel.people.push({"name": "four", "link": "four.html"});
</script>

Vollständiges Beispiel

Schreibe einen Kommentar Antworten abbrechen