mirror of
https://github.com/JeremyLikness/vanillajs-deck
synced 2024-11-15 01:54:57 +00:00
30 lines
1.5 KiB
HTML
30 lines
1.5 KiB
HTML
<title>Data-Binding Example 1</title>
|
|
<h1>Data-Binding Example</h1>
|
|
<label for="first"><div>Number:</div><input type="text" id="first"/></label>
|
|
<label for="second"><div>Multiplied by Number:</div><input type="text" id="second"/></label>
|
|
<label for="result"><div>Result:</div><input type="text" id="result" disabled/></label>
|
|
<label for="firstName"><div>First Name:</div><input type="text" id="firstName"/></label>
|
|
<label for="lastName"><div>Last Name:</div><input type="text" id="lastName"/></label>
|
|
<label for="fullName"><div>Full Name:</div><input type="text" id="fullName" disabled/></label>
|
|
<br/>
|
|
<ul>
|
|
<li repeat="list" class="appear">{{item.idx}} — {{item.value}}</li>
|
|
</ul>
|
|
<script>
|
|
this.list = [{idx: 0, value:"one"}, {idx: 1, value:"two"}, {idx: 2, value:"three"}];
|
|
const bindings = () => {
|
|
var n1 = this.observable(2);
|
|
var n2 = this.observable(2);
|
|
var result = this.computed(() => n1.value*n2.value, [n1, n2]);
|
|
var first = this.observable("Jeremy");
|
|
var last = this.observable("");
|
|
var full = this.computed(() => `${first.value} ${last.value}`.trim(), [first, last]);
|
|
this.bindValue(document.getElementById("first"), n1);
|
|
this.bindValue(document.getElementById("second"), n2);
|
|
this.bindValue(document.getElementById("result"), result);
|
|
this.bindValue(document.getElementById("firstName"), first);
|
|
this.bindValue(document.getElementById("lastName"), last);
|
|
this.bindValue(document.getElementById("fullName"), full);
|
|
};
|
|
setTimeout(bindings, 0);
|
|
</script> |