Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest Chrome, Safari or Firefox browser.
Front-end Model–View–View-Model library
→ Vanilla JS™ ;)
Podaci, objekti business domene
user-interface, HTML
transformativni model
“Observed” a.k.k praćene varijable
Linkanje modela s viewom data-bind atributom
<element data-bind="binding"/>
var example01 = {
firstName: '',
lastName: ''
}
Hello <span data-bind="text: firstName"></span>.
ko.applyBindings(example01);
var example02 = {
firstName: ko.observable(''),
lastName: ko.observable('')
}
Hello <span data-bind="text: firstName"></span>.
ko.applyBindings(example02);
var example03 = {
crew: ko.observableArray([]),
}
<tbody data-bind="visible: crew.length < 1">
<tr><td colspan="2"><em>No crew.</em></td></tr>
</tbody>
<tbody data-bind="foreach: crew, visible: crew.length > 0">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
ko.applyBindings(example03);
[{
"firstName": "David",
"lastName": "Bowman"
},
{
"firstName": "Frank",
"lastName": "Poole"
}]
Members:
| First name | Last name |
|---|---|
| No crew. | |
var example04 = {
firstName: ko.observable(''),
lastName: ko.observable(''),
fullName: function(){return this.firstName + ' ' + this.lastName})
}
Hello <span data-bind="text: fullName"></span>.
Izgled
var example05 = {
query: ko.observable('')
}
<span data-bind="visible: query().length < 1">Empty!</span>"
var example06 = {
entry: ko.observable('')
}
<span data-bind="text: entry"></span>"
var example07 = {
entry: ko.observable('')
}
<span data-bind="html: entry"></span>"
var example08 = {
entry: ko.observable('')
}
<span data-bind="css: {'glyphicon-ok': entry().length > 2, 'glyphicon-remove': entry().length < 3}"></span>"
var example09 = {
entry: ko.observable('')
}
<span data-bind="style: {color: entry()}"></span>"
var example10 = {
entry: ko.observable('')
}
<button data-bind="attr: {disabled: entry() === 'off'}">Do it</button>"
Forme
Tok (as in “flow”)
Templating fičr
<!-- ko foreach: posts --> <!-- /ko -->