Knockout mvvm-m5-slides
-
Upload
hoc-lap-trinh-web -
Category
Education
-
view
593 -
download
0
description
Transcript of Knockout mvvm-m5-slides
![Page 1: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/1.jpg)
Templates, Control of Flow, and Containerless Bindings
John Papa @john_papa
http://johnpapa.net
![Page 2: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/2.jpg)
Outline
§ Named Templates § Control of Flow § Binding Contexts § Inline Templates § Dynamically Choosing a Template § Template Binding Helpers § Containerless Bindings
![Page 3: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/3.jpg)
Templates
§ Re-use code § Encapsulate responsibility for a specific rendering § Knockout supports many popular templating engines
o jQuery Templates o Underscore
§ Knockout has native templates
![Page 4: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/4.jpg)
Named Templates in <script> tags
<div data-‐bind="template: {name: 'personTmpl'}"></div> <script type="text/html" id="personTmpl"> <span data-‐bind="text: firstName"></span> <span data-‐bind="text: lastName"></span> <button data-‐bind="click:selectPerson">Add</button>
</script>
§ Encapsulate a template for re-use
![Page 5: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/5.jpg)
DEMO Named Templates
![Page 6: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/6.jpg)
Outline
§ Named Templates § Control of Flow § Binding Contexts § Inline Templates § Dynamically Choosing a Template § Template Binding Helpers § Containerless Bindings
![Page 7: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/7.jpg)
Control of Flow
• If truthy condition if
• If falsy condition ifnot
• Execute for each item in a list foreach
• Shortcut to execute for the object with
![Page 8: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/8.jpg)
Control of Flow with a Template
<tbody data-‐bind="template: {name: 'productsTmpl', foreach: lines}">
</tbody> <script type="text/html" id="productsTmpl"> <tr> <td style="width: 100px;">
<input data-‐bind="value: quantity" /> </td> ... </tr>
</script>
§ Pass the context for the template with “foreach”
![Page 9: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/9.jpg)
Conditional Control of Flow
<p data-‐bind="if: lines().length > 0"> <span>Total value:</span> <span data-‐bind="text: grandTotal()"></span>
</p>
Any “truthy” expression
![Page 10: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/10.jpg)
Change Context “with“Control of Flow
<div data-‐bind="with: model"> <div data-‐bind="text: brand"></div> <div data-‐bind="text: name"></div>
</div>
<div> <div data-‐bind="text: model().brand"></div> <div data-‐bind="text: model().name"></div>
</div>
Change the context with “with”
![Page 11: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/11.jpg)
Parent Binding Contexts
<button data-‐bind="click: $parent.addItem">Add</button>
§ Sometimes in templates you want to change data binding scope (Data Context) o $data o $parent o $parents o $root
![Page 12: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/12.jpg)
DEMO Control of Flow and Binding Contexts
![Page 13: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/13.jpg)
Outline
§ Named Templates § Control of Flow § Binding Contexts § Inline Templates § Dynamically Choosing a Template § Template Binding Helpers § Containerless Bindings
![Page 14: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/14.jpg)
<tbody data-‐bind="template: {name: 'productsTmpl', foreach: lines}">
</tbody> <script type="text/html" id="productsTmpl"> <tr> <td style="width: 100px;">
<input data-‐bind="value: qty" /> </td> ... </tr>
</script>
<tbody data-‐bind="foreach: lines"> <tr> <td style="width: 100px;">
<input data-‐bind="value: qty"/> </td> ... </tr>
</tbody>
Inline Templates with Control of Flow
§ If not reusing it, there is no need to name a template § Control of flow elements create an implicit template
Template is created
anonymously and implicitly
![Page 15: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/15.jpg)
Knockout’s Native Template Engine
§ Templates inside DOM elements o <script> o Other DOM elements like <div>
§ Anonymous / Inline templates o Templates without a name o Shortcuts to Anonymous template binding
o if o ifnot o with o foreach
All Part of the Native Template Engine
in Knockout
No external templating dependency
![Page 16: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/16.jpg)
<div data-‐bind="template: {if: isSelected}"> <span data-‐bind="text:name"></span> </div> <div data-‐bind="if: isSelected"> <span data-‐bind="text:name"></span> </div>
if and ifnot
“if” shortcut
<div data-‐bind="template: {ifnot: isSelected}"> <span data-‐bind="text:name"></span> </div>
<div data-‐bind="ifnot: isSelected"> <span data-‐bind="text:name"></span> </div>
“ifnot” shortcut
![Page 17: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/17.jpg)
<div data-‐bind="template: {foreach: products}"> <span data-‐bind="text:name"></span> </div> <div data-‐bind="foreach: products"> <span data-‐bind="text:name"></span> </div>
foreach and with
“foreach“ shortcut
<div data-‐bind="template: {if: selectedProduct, data: selectedProduct}"> <span data-‐bind="text:name"></span> </div> <div data-‐bind="with: selectedProduct"> <span data-‐bind="text:name"></span> </div>
“with” shortcut
![Page 18: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/18.jpg)
DEMO Native Template Engine: Inline Templates
![Page 19: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/19.jpg)
Outline
§ Named Templates § Control of Flow § Binding Contexts § Inline Templates § Dynamically Choosing a Template § Template Binding Helpers § Containerless Bindings
![Page 20: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/20.jpg)
<div data-‐bind="template: {name: templateChoice}"> <script type="text/html" id="tmplSummary"> ... </script> <script type="text/html" id="tmplDetails"> ...
</script>
Dynamically Change Templates
§ Swap between multiple templates § Bind the name of the template
my.vm.templateChoice = function () { return showDetails() ? "tmplDetails" : "tmplSummary"; };
![Page 21: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/21.jpg)
<div data-‐bind="ifnot: showDetails()"> ... </div> <div data-‐bind="if: showDetails()"> ... </div>
Control of Flow to Toggle Templates
§ if and ifnot bindings
my.vm.showDetails = ko.observable(false);
![Page 22: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/22.jpg)
DEMO Dynamically Choosing a Template
![Page 23: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/23.jpg)
Outline
§ Named Templates § Control of Flow § Binding Contexts § Inline Templates § Dynamically Choosing a Template § Template Binding Helpers § Containerless Bindings
![Page 24: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/24.jpg)
Template Bindings • Id of an element that contains the template
name
• Renders the template in foreach mode • (once for each item) foreach
• Object to supply as data for the template. • If omitted, uses foreach context or the current context data
• Callback invoked after DOM elements are rendered afterRender
• Callback invoked after DOM elements are added afterAdd
• Callback invoked before DOM elements are removed beforeRemove
![Page 25: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/25.jpg)
<ul data-‐bind="template: { name: 'friendsTemplate', foreach: model().Friends, beforeRemove: function(elem) { $(elem).slideUp() }, afterAdd: function(elem) { $(elem).hide().slideDown() } }"> </ul>
<ul data-‐bind="template: { name: 'friendsTemplate', foreach: model().Friends, beforeRemove: showAni, afterAdd: hideAni}"> </ul>
Template Binding Helpers
Callback to a method in the viewmodel
![Page 26: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/26.jpg)
DEMO Template Binding Helpers
![Page 27: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/27.jpg)
Outline
§ Named Templates § Control of Flow § Binding Contexts § Inline Templates § Dynamically Choosing a Template § Template Binding Helpers § Containerless Bindings
![Page 28: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/28.jpg)
Containerless Control of Flow Bindings
§ Comment syntax o Unlike traditional Javascript template in <script>
§ Use a template, without having a template! o What?! o He’s nuts!
§ Comment based control flow syntax o if o ifnot o foreach o with o template
All Part of the Native Template Engine
in Knockout
![Page 29: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/29.jpg)
<ul> <li class="category">Acoustic Guitars<li> <!-‐-‐ ko foreach:acousticProducts -‐-‐> <li> <span data-‐bind="text: shortDesc></span> </li> <!-‐-‐ /ko -‐-‐> </ul>
Containerless Examples
<!-‐-‐ ko with: selectedPerson -‐-‐> <span data-‐bind="text: name"></span> <input data-‐bind="value: salary"></input> <!-‐-‐ /ko -‐-‐>
Reduces Unneeded Elements
Moves binding logic outside of elements
![Page 30: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/30.jpg)
DEMO Containerless/Comment Bindings
![Page 31: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/31.jpg)
Summary
§ Native Template Engine o Named Templates and Anonymous / Inline Templates
§ Control of Flow o if, ifnot, with, foreach, template
§ Binding Contexts o $data, $parent, $parents, $root
§ Dynamically Choosing a Template o template: {name: myObservableProperty}
§ Template Binding Helpers o name, data, foreach, afterRender, afterAdd, beforeRemove
§ Containerless/Comment Bindings o <!– ko foreach: products -->
§ External Templates o https://github.com/ifandelse/Knockout.js-External-Template-Engine
![Page 32: Knockout mvvm-m5-slides](https://reader033.fdocuments.us/reader033/viewer/2022052508/5594c5321a28abab5c8b46c8/html5/thumbnails/32.jpg)
For more in-depth online developer training visit
on-demand content from authors you trust