Permalink
Browse files

fixed knockout.js code example err; added applyBindings to make it wo…

…rkable example; add view another binding to show imidiate changes
  • Loading branch information...
1 parent 8992781 commit 23385287deec2f6a3751c12df638240b4fa23b8a @gschema gschema committed Aug 22, 2012
Showing with 8 additions and 6 deletions.
  1. +8 −6 book/index.html
View
@@ -4971,15 +4971,17 @@ <h3>View</h3>
<p>ViewModel:</p>
<pre class="brush: js">
var aViewModel = {
- contactName: ko.observable( "John" );
+ contactName: ko.observable("John")
};
+ko.applyBindings(aViewModel);
</pre>
<p>View:</p>
-<pre class="brush: js">&lt;input id="source" data-bind="value: contactName, valueUpdate: "keyup" /&gt;&lt;/p&gt;
-
-&lt;div data-bind="visible: contactName().length &gt; 10"&gt;
- You have a really long name!
-&lt;/div&gt;
+<pre class="brush: js">
+ &lt;p&gt;&lt;input id=&quot;source&quot; data-bind=&quot;value: contactName, valueUpdate: &#x27;keyup&#x27;&quot; /&gt;&lt;/p&gt;
+ &lt;div data-bind=&quot;visible: contactName().length &gt; 10&quot;&gt;
+ You have a really long name!
+ &lt;/div&gt;
+ &lt;p&gt;Contact name: &lt;strong data-bind=&quot;text: contactName&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
</pre>
<p>Our input text-box (source) obtains it's initial value from <code>contactName</code>, automatically updating this value whenever contactName changes. As the data binding is two-way, typing into the text-box will update <code>contactName</code> accordingly so the values are always in sync.</p>
<p>Although implementation specific to KnockoutJS, the <code>&lt;div&gt;</code> containing the "You have a really long name!" text also contains simple validation (once again in the form of data bindings). If the input exceeds 10 characters, it will display, otherwise it will remain hidden.</p>

0 comments on commit 2338528

Please sign in to comment.