<!doctype <html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Startseite</title>
</head>
<body>
...
<script src="Scripts/jquery-2.1.1.js"><script>
<script src="Scripts/knockout-3.3.0.js"></script>
<script src="indexViewModel.js"></script>
<script>
$(function () {
var viewModel = new ViewModel();
ko.applyBindings(viewModel, document.body);
});
</script>
</body>
</html>
...
<input … data-bind="value: produktname"/>
...
<select … data-bind="options: produktarten, value: ausgewaehlteProduktart"…/>
...
<button … data-bind="click: neuesProduktSpeichern">Speichern</button>
...
function ViewModel() {
"use strict";
var self = this;
…
}
function ViewModel() {
"use strict";
var self = this;
self.name = ko.observable("");
self.arten = ko.observableArray(['A', 'B', 'C']);
self.ausgewaehlteArt = ko.observable();
self.preis = ko.observable();
self.liste = ko.observableArray([]);
self.speichern = function () {
var command = {
Name: self.name(),
Art: self.ausgewaehlteArt(),
Preis: self.preis()
};
...
}
}
| Art | Beschreibung | HTML | JS |
|---|---|---|---|
| visible | Sichtbarkeit,
Ein-/ Ausblenden des zugehörigen DOM-Elements |
<div data-bind="visible: istSichtbar">
…
</div>
|
istSichtbar = ko.observable(true);
|
| text | Text-Bindung,
Anzeige eines Textes im zugehörigen DOM-Elements |
<span data-bind="text: meldung"></span>
|
meldung: ko.observable(“Hallo Welt!”)
|
| html | html-Bindung,
Anzeige von HTML-Elementen im zugehörigen DOM-Elements |
<div data-bind="html: detail"></div>
|
detail = ko.observable(“<span>Testbeispiel</span>”);
|
| css | css-Bindung,
einer CSS-Klassen zugeordnete DOM-Element |
<div data-bind="css: { profitWarnung: wert() < 0 }">
Wert-Information
</div>
|
wert: ko.observable(150000); // grün
…
wert: ko.observable(-50); // rot
|
| value | Wert an Formular-Elemente wie <input>, <select> und <textarea> binden |
<input data-bind="value: nutzer" />
|
nutzer = ko.observable("")
|
| attr | attr-Binding,
generische Möglichkeit den Wert eines Attributs für die zugehörigen DOM-Elements zubinden |
<a data-bind="attr: { href: url, title: detail }">
Report
</a>
|
url = ko.observable("ahhay.html");
details = ko.observable("Autorenseite")
|