Knockout.js Succinctly (2)

Chapter 4 – Control-Flow Bindings

Designing a view for a VM is like designing an HTML template for a JavaScript object.

KO includes two logical bindings: if and ifnot. Also, the with binding lets you manually alter the scope of template blocks.

Previous example:
image

*** KO makes several special properties available in Binding Context. Note that these properties are only available in the View, not the VM.

$root – refers to top-level VM, regardless of loops or other changes in scope.
$data – the data in the current context, so ‘$data.name’ is equal to just ‘name’
$index – inside of a foreach loop, $index has the current item’s index in the array.
image
$parent – mostly used in nested loop. In the inner loop, if you want to refer to outer loop’s property, use $parent.

Discounted Products

Now we add a discount property to the Product Class.
Use typeof(varname) !== ‘undefined’ to decide whether it’s null
image
We can create the products this way:
image

if and ifnot binding

image

Page 34, 01/18/2013, 00:06am
the With Binding

In your VM, define a Product, make it observable
image

Use with to define the scope of a particular HTML block and what data to use.
image

Chapter 5 – Appearance Binding

KO ships with 6 bindings to control the appearance of HTML elements:

1.  text: <value> – set the contents of an HTML
2. html: <value> – set the HTML contents of an element
3. visible: <condition> – show or hide an element based on certain conditions
4. css: <object> – add css classes to an element
5. style: <object> – define style attribute of an element
6. attr: <object> – add arbitrary attributes to an element.

These attributes always occurred in “data-bin” attributes.

Text Binding

It display the value of  property inside of an HTML element
<td data-bind=’text: name’></td>
You get:
<td>John Adams</td>

Use plain text instead of HTML – or else it will try to encode it and display &lt; or &gt; etc. Use html binding for HTML output.

KO handles cross-browser compatibility issues too. (in IE, it’s InnerText; in FireFox, it uses textContent)
image

HTML Binding

Render a string as an HTML markup

Define a computed observable that returns an HTML contents:
image

In HTML view, use html tag to display the computed observable
image

You get this:
image

Note: when you define a model for KO:
image

image

Visible Binding

<td data-bin=’visible: discount() >0’></td>

if false, the <td> will not be visible.

CSS Binding

<td data-bind=’if: discount() > 0′ style=’color: red’>
You saved <span data-bind=‘text: formattedDiscount, css: {supersaver: discount() > .15}’></span>!!!

You can add multiple bindings to a single data-bind by using comma (,).

css takes the object { supersavor: discount() > .15} as its argument. It means use supersavor class if the discount is > 0.15.

Style Binding

You saved <span data-bind=’text: formattedDiscount,
style: {fontWeight: discount() > .15 ? "bold" :"normal"}’></span>!!!

if discount() > .15 then
fontWeight = “bold”
else
fontWeight = “normal”

Attr Binding

<p><a data-bind=’attr: {href: featuredProduct().permalink}’>View details</a></p>

set href=featuredProduct().permalink

Chapter 6 – Interactive Binding

KO maintains form values and ViewModel in both directions. Powerful!!!

image

KO has 11 bindings for interacting with the user

1. click: <method> – call a VM method when the element is clicked.
2. value: <property> – link a form element’s value to a VM property.
3. event: <object> – call a method when a user initiated event occurs
4. submit: <method> – call a method when a form is submitted
5. enable: <property> – enable a form element based on condition
6. disable: <property> – disable form element based on a certain condition
7. checked: <property> – link a radio button or checkbox to a VM property.
8. options: <array> – define a <select> element with a VM array.
9. selectedOptions: <array> – define the active elements in a <select> field
10.hasfocus: <property> – define whether or not the element is focused.

These all are used in the data-bind attribute.

An HTML Form

image
image

Value Binding

Difference between text binding and value binding: User Can Change Value Binding!!! So use it in a <Input> tag!!!

image

image

Value Binding –
image

image

When you click the button to update the value, it will update the value in the text box
image

08:59pm, 01/18/2013, Page 44

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s