mirror of
https://github.com/JeremyLikness/vanillajs-deck
synced 2024-11-14 17:44:56 +00:00
33 lines
1.6 KiB
HTML
33 lines
1.6 KiB
HTML
<title>Databinding</title>
|
|
<h1>Databinding Examples</h1>
|
|
<h2><<«——»>></h2>
|
|
<label for="first"><div>Number:</div><input type="text" id="first" data-bind="n1"/></label>
|
|
<label for="second"><div>Multiplied by Number:</div><input type="text" id="second" data-bind="n2"/></label>
|
|
<label for="result"><div>Result:</div><input type="text" id="result" data-bind="result" disabled/></label>
|
|
<label for="firstName"><div>First Name:</div><input type="text" id="firstName" data-bind="first"/></label>
|
|
<label for="lastName"><div>Last Name:</div><input type="text" id="lastName" data-bind="last"/></label>
|
|
<label for="fullName"><div>Full Name:</div><input type="text" id="fullName" data-bind="full" disabled/></label>
|
|
<label for="backwards"><div>Backwards:</div><input type="text" id="backwards" data-bind="back" disabled/></label>
|
|
<br/>
|
|
<ul>
|
|
<li repeat="list">{{item.idx}} — {{item.value}}</li>
|
|
</ul>
|
|
<script>
|
|
this.list = [{idx: 0, value:"one"}, {idx: 1, value:"two"}, {idx: 2, value:"three"}];
|
|
const first = this.observable("Jeremy");
|
|
const last = this.observable("");
|
|
const n1 = this.observable(2);
|
|
const n2 = this.observable(4);
|
|
// assign to context
|
|
this.n1 = n1;
|
|
this.n2 = n2;
|
|
this.first = first;
|
|
this.last = last;
|
|
// computed
|
|
this.result = this.computed(() => n1.value*n2.value, [n1, n2]);
|
|
const full = this.computed(() => `${first.value} ${last.value}`.trim(), [first, last]);
|
|
this.full = full;
|
|
this.back = this.computed(() => `${full.value.split('').reverse().join('')}`, [full]);
|
|
</script>
|
|
<next-slide>210-pwa</next-slide>
|
|
<transition>slide-left</transition> |