Knockout mvvm-m5-slides

Templates, Control of Flow, and
Containerless Bindings
John Papa
@john_papa
http://johnpapa.net

Outline
§ 
§ 
§ 
§ 
§ 
§ 
§ 

Named Templates
Control of Flow
Binding Contexts
Inline Templates
Dynamically Choosing a Template
Template Binding Helpers
Containerless Bindings

Templates
§  Re-use code
§  Encapsulate responsibility for a specific rendering
§  Knockout supports many popular templating engines
o 
o 

jQuery Templates
Underscore

§  Knockout has native templates

Named Templates in <script> tags
§  Encapsulate a template for re-use

<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>

Control of Flow

if

•  If truthy condition

ifnot

•  If falsy condition

foreach
with

•  Execute for each item in a list

•  Shortcut to execute for the object

Control of Flow with a Template
§  Pass the context for the template with “foreach”
<tbody

{name:
'productsTmpl',
foreach:
lines}">

</tbody>

<script
type="text/html"
id="productsTmpl">

<tr>

<td
style="width:
100px;">

<input

data-‐bind="value:
quantity"
/>

</td>

...

</tr>

</script>

Conditional Control of Flow

Any “truthy” expression

<p
data-‐bind="if:
lines().length
>
0">

<span>Total
value:</span>

<span
data-‐bind="text:
grandTotal()"></span>

</p>

Change Context “with“Control of Flow

<div>

<div
data-‐bind="text:
model().brand"></div>

<div
data-‐bind="text:
model().name"></div>

</div>

Change the context
with “with”
<div
data-‐bind="with:
model">

<div
data-‐bind="text:
brand"></div>

<div
data-‐bind="text:
name"></div>

</div>

Parent Binding Contexts
§  Sometimes in templates you want to change
data binding scope (Data Context)
o 
o 
o 
o 

$data
$parent
$parents
$root

<button

data-‐bind="click:
$parent.addItem">Add</button>

DEMO
Control of Flow and Binding Contexts

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
<tbody
data-‐bind="foreach:
lines">

<tbody

<tr>

{name:
'productsTmpl',
foreach:
lines}">

<td
style="width:
100px;">

</tbody>

Template is

<input
qty"/>

</td>

<script
type="text/html"
id="productsTmpl">

created
anonymously

...

<tr>

and implicitly

</tr>

<td
style="width:
100px;">

</tbody>

<input

qty"
/>

</td>

...

</tr>

</script>

Knockout’s Native Template Engine
§  Templates inside DOM elements
o 
o 

<script>
Other DOM elements like <div>

§  Anonymous / Inline templates
o 
o 

All Part of the
Native Template Engine
in Knockout

Templates without a name
Shortcuts to Anonymous template binding
o 
o 
o 
o 

if
ifnot
with
foreach

No external
templating dependency

if and ifnot
<div
{if:
isSelected}">

<span
data-‐bind="text:name"></span>

</div>

<div
data-‐bind="if:
isSelected">

<span

</div>

<div
{ifnot:
isSelected}">

<span

</div>

<div
data-‐bind="ifnot:
isSelected">

<span

</div>

“if” shortcut

“ifnot” shortcut

foreach and with
<div
{foreach:
products}">

<span

</div>

<div
data-‐bind="foreach:
products">

<span

</div>

<div

{if:
selectedProduct,
data:
selectedProduct}">

<span

</div>

<div
data-‐bind="with:
selectedProduct">

<span

</div>

“foreach“
shortcut

“with”
shortcut

DEMO
Native Template Engine: Inline Templates

Dynamically Change Templates
§  Swap between multiple templates
§  Bind the name of the template
<div
{name:
templateChoice}">

<script
type="text/html"
id="tmplSummary">

...

</script>

<script
type="text/html"
id="tmplDetails">

...

</script>

my.vm.templateChoice
=
function
()
{

return
showDetails()
?
"tmplDetails"
:
"tmplSummary";

};

Control of Flow to Toggle Templates
§  if and ifnot bindings
<div
data-‐bind="ifnot:
showDetails()">

...

</div>

<div
data-‐bind="if:
showDetails()">

...

</div>

my.vm.showDetails
=
ko.observable(false);

DEMO
Dynamically Choosing a Template

Template Bindings
name
foreach
data
afterRender
afterAdd
beforeRemove

•  Id of an element that contains the template

•  Renders the template in foreach mode
•  (once for each item)
•  Object to supply as data for the template.
•  If omitted, uses foreach context or the current context
•  Callback invoked after DOM elements are rendered

•  Callback invoked after DOM elements are added

•  Callback invoked before DOM elements are removed

Template Binding Helpers

Callback to a method
<ul
{

in the viewmodel

name:
'friendsTemplate',

foreach:
model().Friends,

beforeRemove:
showAni,

beforeRemove:
function(elem)
{
$(elem).slideUp()
},

afterAdd:
hideAni}">

afterAdd:
function(elem)
{
$(elem).hide().slideDown()
}
}">

</ul>

Containerless Control of Flow Bindings
§  Comment syntax
o 

Unlike traditional Javascript template in <script>

§  Use a template, without having a template!
o 
o 

What?!
He’s nuts!

§  Comment based control flow syntax
o 
o 
o 
o 
o 

if
ifnot
foreach
with
template

All Part of the
Native Template Engine
in Knockout

Containerless Examples
Reduces Unneeded
Elements

<!-‐-‐
ko
with:
selectedPerson
-‐-‐>

<span
data-‐bind="text:
name"></span>

<input
salary"></input>

<!-‐-‐
/ko
-‐-‐>

Moves binding logic
outside of elements

<ul>

<li
class="category">Acoustic
Guitars<li>

<!-‐-‐
ko
foreach:acousticProducts
-‐-‐>

<li>

<span
data-‐bind="text:
shortDesc></span>

</li>

<!-‐-‐
/ko
-‐-‐>

</ul>

DEMO
Containerless/Comment Bindings

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

For more in-depth online developer training visit

on-demand content from authors you trust

Knockout mvvm-m5-slides

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Knockout mvvm-m5-slides

Ähnlich wie Knockout mvvm-m5-slides (20)

Mehr von MasterCode.vn

Mehr von MasterCode.vn (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Knockout mvvm-m5-slides