!!! Listings aus dem Artikel "Kampfzone" 
!!! von Tam Hanna 
!!! veröffentlicht in iX 11/2013, S. 139

!!! Listing 1: Variable automatisch anzeigen

@li:<button type="button" onclick="create()">Erstellen</button> <br>

<p>Eingabetext: <input data-bind="value: inVal" /></p>
<p>Spiegel-Span: <span data-bind="text: inVal"></span></p>
    
<script type="text/javascript" src="knockout-2.3.0.js"></script>
<script type="text/javascript">
    function aModel() {
        this.inVal = ko.observable(0);
    }

    function create() {
        window.myModel = new aModel();
        ko.applyBindings(window.myModel);
    }
</script>

!!! Listing 2: Ein Array ergänzen

@li:<button type="button" onclick="create()">Erstellen</button><br>
<button type="button" onclick="addElem()">Element einbauen</button><br>

<table>
  <thead>
    <tr><th>Feld A</th><th>Feld B</th></tr>
  </thead>
  <tbody data-bind="foreach: myArray">
    <tr>
        <td data-bind="text: feldA"></td>
        <td data-bind="text: feldB"></td>
    </tr>
  </tbody>
</table>

<script type="text/javascript" src="knockout-2.3.0.js"></script>
<script type="text/javascript">
function anElem(_a, _b) {
  this.feldA=_a;
  this.feldB=_b;
}
function aModel() {
  this.myArray = ko.observableArray();
  this.myArray.push(new anElem("A", "A2"));
  this.myArray.push(new anElem("B", "B2"));
  this.myArray.push(new anElem("C", "C2"));

}
function addElem() {
  window.myModel.myArray.push(new anElem("D", "D2"));
}
function create() {
  window.myModel = new aModel();
  ko.applyBindings(window.myModel);
}
</script>

!!! Listing 3: Berechnete Observables

@li:<button type="button" onclick="create()">Erstellen</button> <br>

<p>Anzahl: <input data-bind="value: inCount" /></p>
<p>Objekt: <input data-bind="value: inName" /></p>
<p>Beschreibung: <span data-bind="text: outV"></span></p>

<script type="text/javascript" src="knockout-2.3.0.js"></script>
<script type="text/javascript">
function aModel() {
    this.inCount = ko.observable(0);
    this.inName = ko.observable("Kekse");
    this.outV = ko.computed(function() {
      if(this.inCount()==0) {
        return "Nichts ist vorhanden";
      }
      else {
        return this.inCount() + " Elemente von " + this.inName();
      }
      return "Hallo";
    }, this);
}

function create()
{
    window.myModel = new aModel();
    ko.applyBindings(window.myModel);
}
</script>
  </body>
</html>