Github/vanillajs-deck
1
0
Fork 0
mirror of https://github.com/JeremyLikness/vanillajs-deck synced 2024-12-04 19:27:37 +00:00
Code Issues Projects Releases Wiki Activity

Databinding slide

Browse Source
This commit is contained in:
Jeremy Likness 2020-01-29 16:46:22 -08:00
parent c6da0a7650
commit bf40a6f00c
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
slides/190-this-app.html
View File

@ -15,4 +15,5 @@ app.js
-- keyhandler.js -- keyhandler.js
.. navigator.js ⤴ .. navigator.js ⤴
</pre> </pre>
<h2 class="appear">Inception Demo</h2> <h2 class="appear">Inception Demo</h2>
<next-slide>200-data-binding</next-slide>

12
slides/data-binding.html → slides/200-data-binding.html
View File

@ -1,14 +1,16 @@
<title>Data-Binding Example 1</title> <title>Databinding</title>
<h1>Data-Binding Example</h1> <h1>Databinding Examples</h1>
<h2 class="anim-spin">&lt;&mdash;&gt;</h2>
<label for="first"><div>Number:</div><input type="text" id="first" data-bind="n1"/></label> <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="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="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="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="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="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/> <br/>
<ul> <ul>
<li repeat="list" class="appear">{{item.idx}} &mdash; {{item.value}}</li> <li repeat="list">{{item.idx}} &mdash; {{item.value}}</li>
</ul> </ul>
<script> <script>
this.list = [{idx: 0, value:"one"}, {idx: 1, value:"two"}, {idx: 2, value:"three"}]; this.list = [{idx: 0, value:"one"}, {idx: 1, value:"two"}, {idx: 2, value:"three"}];
@ -23,5 +25,7 @@
this.last = last; this.last = last;
// computed // computed
this.result = this.computed(() => n1.value*n2.value, [n1, n2]); this.result = this.computed(() => n1.value*n2.value, [n1, n2]);
this.full = this.computed(() => `${first.value} ${last.value}`.trim(), [first, last]); 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> </script>