Browse files

Added tutorial for kb.ViewModel

  • Loading branch information...
1 parent 69316e3 commit e177e8ddc9e2f77a810e59d6d1b4861f103cb16e Kevin Malakoff committed May 14, 2012
Showing with 415 additions and 65 deletions.
  1. +5 −0 app/_docs/docs.jade
  2. +1 −1 app/_docs/docs_kb_collection_observable.jade
  3. +6 −1 app/_docs/docs_kb_view_model.jade
  4. +1 −1 app/_layout/_layout_mixins.jade
  5. +26 −0 app/_tutorials/kb_view_model/kbvm_bb_collection_view.html
  6. +26 −0 app/_tutorials/kb_view_model/kbvm_bb_collection_view.html.txt
  7. +5 −0 app/_tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.coffee
  8. +20 −0 app/_tutorials/kb_view_model/kbvm_bb_model_view.html
  9. +20 −0 app/_tutorials/kb_view_model/kbvm_bb_model_view.html.txt
  10. +5 −0 app/_tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.coffee
  11. +80 −0 app/_tutorials/kb_view_model/tutorial_kb_view_model.jade
  12. +11 −11 app/_tutorials/relational_models/br_view.html
  13. +11 −11 app/_tutorials/relational_models/br_view.html.txt
  14. +1 −1 public/_docs_kb_store.html
  15. +1 −1 public/_tutorial_inspector.html
  16. +1 −1 public/docs.html
  17. +1 −1 public/docs_kb_collection_observable.html
  18. +1 −1 public/docs_kb_default_wrapper.html
  19. +1 −1 public/docs_kb_formatted_observable.html
  20. +1 −1 public/docs_kb_localized_observable.html
  21. +1 −1 public/docs_kb_observable.html
  22. +1 −1 public/docs_kb_observables.html
  23. +1 −1 public/docs_kb_ref_countable.html
  24. +1 −1 public/docs_kb_triggered_observable.html
  25. +1 −1 public/docs_kb_utils.html
  26. +2 −2 public/docs_kb_view_model.html
  27. +1 −1 public/index.html
  28. +1 −1 public/release_notes.html
  29. +1 −1 public/tutorial_getting_started.html
  30. +128 −0 public/tutorial_kb_view_model.html
  31. +22 −22 public/tutorial_relational_models.html
  32. +1 −1 public/tutorial_todos.html
  33. +17 −0 public/tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.js
  34. +13 −0 public/tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.js
View
5 app/_docs/docs.jade
@@ -28,6 +28,7 @@ block docs_overview
li property_name
li 'constant string'
li "dynamic string"
+ li CONSTANT_NAME
h3='API Indicators'
@@ -66,6 +67,10 @@ block docs_overview
span='whereas this one sets the model:'
pre view_model.model(model)
+ h3='Other Things Worth Knowing'
+ ul
+ li="'kb' and 'Knockback' are aliased so you can use them interchangeably: kb.observable(model, 'name') is the same as Knockback.observable(model,'name')"
+
block content
div.api.container
h1="Knockback.js API and Usage Examples"
View
2 app/_docs/docs_kb_collection_observable.jade
@@ -20,7 +20,7 @@ block api_descriptions
h2='kb.CollectionObservable'
div="Used to generate ViewModels automatically for a collections's models"
h4='Super class:'
- a(href='#ref_countable')=' kb.RefCountable'
+ a(href='docs_kb_ref_countable.html')=' kb.RefCountable'
h4='Example:'
pre(data-for='cs').
view_model =
View
7 app/_docs/docs_kb_view_model.jade
@@ -20,7 +20,7 @@ block api_descriptions
h2='kb.ViewModel'
div="Used to generate observables automatically for a model's attributes"
h4='Super class:'
- a(href='#ref_countable')=' kb.RefCountable'
+ a(href='docs_kb_ref_countable.html')=' kb.RefCountable'
h4='Example:'
pre(data-for='cs').
view_model = kb.viewModel(new Backbone.Model({first_name: "Planet", last_name: "Earth"}))
@@ -34,6 +34,11 @@ block api_descriptions
// Do something then clean up
// kb.utils.release(view_model); view_model = null;
+ h4='Tutorials'
+ ul
+ li
+ a(href='tutorial_kb_view_model.html')='kb.ViewModel'
+
h3#extend='kb.ViewModel::extend(properties, [classProperties]) '
span.label.label-success='class'
div="Used to derive a class in JavaScript (when CoffeeScript is not used)"
View
2 app/_layout/_layout_mixins.jade
@@ -18,7 +18,7 @@ mixin pageNavbarWriteItem(label, url, active_label)
a(href='#{url}') #{label}
mixin pageNavbar(active_label, include_code_language_selector)
- - var ITEMS = [{'Home': 'index.html'}, {'Getting Started': 'tutorial_getting_started.html'}, {'Docs': 'docs.html'}, {'Tutorials': [ {'Getting Started': 'tutorial_getting_started.html'}, {'Relational Models': 'tutorial_relational_models.html'}, {'Todos': 'tutorial_todos.html'} ]}, {'Release Notes': 'release_notes.html'} ]
+ - var ITEMS = [{'Home': 'index.html'}, {'Getting Started': 'tutorial_getting_started.html'}, {'Docs': 'docs.html'}, {'Tutorials': [ {'Getting Started': 'tutorial_getting_started.html'}, {'kb.ViewModel': 'tutorial_kb_view_model.html'}, {'Relational Models': 'tutorial_relational_models.html'}, {'Todos': 'tutorial_todos.html'} ]}, {'Release Notes': 'release_notes.html'} ]
div.navbar.page
div.navbar-inner
View
26 app/_tutorials/kb_view_model/kbvm_bb_collection_view.html
@@ -0,0 +1,26 @@
+<div id='kbvm_bb_collection'>
+ <p>
+ <span>First Person: </span>
+ <input data-bind="value: name"/>
+ </p>
+ <p>
+ <span>Second Person: </span>
+ <input data-bind="value: friends()[0].name"/>
+ </p>
+ <p>
+ <span>Third Person: </span>
+ <input data-bind="value: friends()[1].name"/>
+ </p>
+
+ <br/>
+
+ <p>
+ <span>Person: </span>
+ <span data-bind="text: name"></span>
+ <p>
+ <span>Has these friends: </span>
+ <ul data-bind="foreach: friends">
+ <li data-bind="text: name"></li>
+ </ul>
+ </p>
+</div>
View
26 app/_tutorials/kb_view_model/kbvm_bb_collection_view.html.txt
@@ -0,0 +1,26 @@
+&lt;div id='kbvm_bb_collection'&gt;
+ &lt;p&gt;
+ &lt;span&gt;First Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: name&quot;/&gt;
+ &lt;/p&gt;
+ &lt;p&gt;
+ &lt;span&gt;Second Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: friends()[0].name&quot;/&gt;
+ &lt;/p&gt;
+ &lt;p&gt;
+ &lt;span&gt;Third Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: friends()[1].name&quot;/&gt;
+ &lt;/p&gt;
+
+ &lt;br/&gt;
+
+ &lt;p&gt;
+ &lt;span&gt;Person: &lt;/span&gt;
+ &lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
+ &lt;p&gt;
+ &lt;span&gt;Has these friends: &lt;/span&gt;
+ &lt;ul data-bind=&quot;foreach: friends&quot;&gt;
+ &lt;li data-bind=&quot;text: name&quot;&gt;&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/p&gt;
+&lt;/div&gt;
View
5 app/_tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.coffee
@@ -0,0 +1,5 @@
+bob = new Backbone.Model({name: 'Bob', friends: new Backbone.Collection([new Backbone.Model({name: 'Fred'}), new Backbone.Model({name: 'John'})])})
+
+view_model = kb.viewModel(bob)
+
+ko.applyBindings(view_model, $('#kbvm_bb_collection')[0])
View
20 app/_tutorials/kb_view_model/kbvm_bb_model_view.html
@@ -0,0 +1,20 @@
+<div id='kbvm_bb_model'>
+ <p>
+ <span>First Person: </span>
+ <input data-bind="value: name"/>
+ </p>
+ <p>
+ <span>Second Person: </span>
+ <input data-bind="value: friend().name"/>
+ </p>
+
+ <br/>
+
+ <p>
+ <span>Person: </span>
+ <span data-bind="text: name"></span>
+ <p>
+ <span>Has this friend: </span>
+ <span data-bind="text: friend().name"></span>
+ </p>
+</div>
View
20 app/_tutorials/kb_view_model/kbvm_bb_model_view.html.txt
@@ -0,0 +1,20 @@
+&lt;div id='kbvm_bb_model'&gt;
+ &lt;p&gt;
+ &lt;span&gt;First Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: name&quot;/&gt;
+ &lt;/p&gt;
+ &lt;p&gt;
+ &lt;span&gt;Second Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: friend().name&quot;/&gt;
+ &lt;/p&gt;
+
+ &lt;br/&gt;
+
+ &lt;p&gt;
+ &lt;span&gt;Person: &lt;/span&gt;
+ &lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
+ &lt;p&gt;
+ &lt;span&gt;Has this friend: &lt;/span&gt;
+ &lt;span data-bind=&quot;text: friend().name&quot;&gt;&lt;/span&gt;
+ &lt;/p&gt;
+&lt;/div&gt;
View
5 app/_tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.coffee
@@ -0,0 +1,5 @@
+bob = new Backbone.Model({name: 'Bob', friend: new Backbone.Model({name: 'Fred'})})
+
+view_model = kb.viewModel(bob)
+
+ko.applyBindings(view_model, $('kbvm_bb_model')[0])
View
80 app/_tutorials/kb_view_model/tutorial_kb_view_model.jade
@@ -0,0 +1,80 @@
+extends ../../_layout/_layout_template
+
+include ../../_layout/_layout_mixins
+
+block title
+ title= "Knockback.js Tutorial: kb.ViewModel"
+
+block includes
+ link(rel="stylesheet",href="stylesheets/tutorial.css")
+ include ../../_demos/_demos_include_knockback_scripts
+
+block navbar
+ mixin pageNavbar('kb.ViewModel', true)
+
+block content
+ section
+ h1="Tutorial: kb.ViewModel"
+ p
+ a(href='index.html')='Knockback.js'
+ span=' has a helper called '
+ a(href='docs_kb_view_model.html')='kb.ViewModel'
+ span=' to automatically generate observables for each attribute'
+ p
+ span='Most likely you will use the kb.viewModel(model) '
+ span.label.label-info='factory'
+ span=' method to create a kb.ViewModel.'
+
+ p
+ span.label.label-important='warning'
+ span=' Unless you specify otherwise, a kb.ViewModel creates an observable for every attribute (including the id) which can cause performance issues on a page with many models. It is recommended to get started quickly with kb.ViewModels and then optimize with specialized classes like kb.Observable and kb.CollectionObservable.'
+
+ p
+ h3="Attribute Type: Backbone.Model"
+ p
+ p="If Knockback encounters a attribute that is a Backbone.Model, it automatically creates a kb.ViewModel for it. Because the model can change behind the scenes, you must access the view model using the 'attribute_name()' syntax rather than as a simple property."
+
+ div.container-fluid
+ div.row-fluid
+ div.span8
+ h4='Views:'
+ pre
+ include kbvm_bb_model_view.html.txt
+
+ h4='ViewModel and Bindings:'
+ pre(data-for='cs')
+ include kbvm_bb_model_view_model_bindings.coffee
+
+ pre(data-for='js')
+ include ../../../public/tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.js
+
+ div.span4
+ h4='Live Result'
+ div.demos_result_box
+ include kbvm_bb_model_view.html
+ script(type="application/javascript",src="tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.js")
+
+ p
+ h3="Attribute Type: Backbone.Collection"
+ p
+ p="If Knockback encounters a attribute that is a Backbone.Collection, it automatically creates a kb.CollectionObservable for it and a kb.ViewModel for each of it's models. Because the collection can change behind the scenes, you must access the collection observable using the 'attribute_name()' syntax rather than as a simple property."
+
+ div.container-fluid
+ div.row-fluid
+ div.span8
+ h4='Views:'
+ pre
+ include kbvm_bb_collection_view.html.txt
+
+ h4='ViewModel and Bindings:'
+ pre(data-for='cs')
+ include kbvm_bb_collection_view_model_bindings.coffee
+
+ pre(data-for='js')
+ include ../../../public/tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.js
+
+ div.span4
+ h4='Live Result'
+ div.demos_result_box
+ include kbvm_bb_collection_view.html
+ script(type="application/javascript",src="tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.js")
View
22 app/_tutorials/relational_models/br_view.html
@@ -1,16 +1,16 @@
-<p>First Person:
- <input data-bind="value: occupants()[0].name"/>
- <div>(home: <span data-bind="text: occupants()[0].livesIn().location"></span>)</div>
-</p>
-<p>Second Person:
- <input data-bind="value: occupants()[1].name"/>
- <div>(home: <span data-bind="text: occupants()[1].livesIn().location"></span>)</div>
-</p>
+<div id='br_relational_models'>
+ <p>First Person:
+ <input data-bind="value: occupants()[0].name"/>
+ <div>(home: <span data-bind="text: occupants()[0].livesIn().location"></span>)</div>
+ </p>
+ <p>Second Person:
+ <input data-bind="value: occupants()[1].name"/>
+ <div>(home: <span data-bind="text: occupants()[1].livesIn().location"></span>)</div>
+ </p>
-<br/>
+ <br/>
-<div id='br_relational_models'>
- <p>Location: <span data-bind="text: location"></span></p>
+ <p>Location: <input data-bind="value: location"/></p>
<p>
Has these people living there:
<ul data-bind="foreach: occupants">
View
22 app/_tutorials/relational_models/br_view.html.txt
@@ -1,16 +1,16 @@
-&lt;p&gt;First Person:
- &lt;input data-bind=&quot;value: occupants()[0].name&quot;/&gt;
- &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[0].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
-&lt;/p&gt;
-&lt;p&gt;Second Person:
- &lt;input data-bind=&quot;value: occupants()[1].name&quot;/&gt;
- &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[1].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
-&lt;/p&gt;
+&lt;div id='br_relational_models'&gt;
+ &lt;p&gt;First Person:
+ &lt;input data-bind=&quot;value: occupants()[0].name&quot;/&gt;
+ &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[0].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
+ &lt;/p&gt;
+ &lt;p&gt;Second Person:
+ &lt;input data-bind=&quot;value: occupants()[1].name&quot;/&gt;
+ &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[1].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
+ &lt;/p&gt;
-&lt;br/&gt;
+ &lt;br/&gt;
-&lt;div id='br_relational_models'&gt;
- &lt;p&gt;Location: &lt;span data-bind=&quot;text: location&quot;&gt;&lt;/span&gt;&lt;/p&gt;
+ &lt;p&gt;Location: &lt;input data-bind=&quot;value: location&quot;/&gt;&lt;/p&gt;
&lt;p&gt;
Has these people living there:
&lt;ul data-bind=&quot;foreach: occupants&quot;&gt;
View
2 public/_docs_kb_store.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.Store--><!--////////////////////////////////--><h2>kb.Store</h2><div>Used to manage the persistence and sharing of ViewModels and observables (mainly to break relationship cycles between models).</div><h4>Example:</h4><pre data-for="cs">TODO</pre><pre data-for="js">TODO
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.Store--><!--////////////////////////////////--><h2>kb.Store</h2><div>Used to manage the persistence and sharing of ViewModels and observables (mainly to break relationship cycles between models).</div><h4>Example:</h4><pre data-for="cs">TODO</pre><pre data-for="js">TODO
</pre><h3 id="constructor">constructor()</h3><div>Used to create a new instance</div><pre data-for="cs">TODO</pre><pre data-for="js">TODO
</pre><h3 id="destroy">destroy()</h3><div>Used to release the memory of the object</div><h3 id="register_value">registerValue(key, value)</h3><div>TODO</div><pre data-for="cs">TODO</pre><pre data-for="js">TODO
</pre><h3 id="resolve_value">resolveValue(key, create_fn, args)</h3><div>TODO</div><pre data-for="cs">TODO</pre><pre data-for="js">TODO
View
2 public/_tutorial_inspector.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Tutorial: Inspector</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/tutorial.css"><script type="application/javascript" src="vendor/javascripts/knockout-2.1.0.debug.js"></script><script type="application/javascript" src="vendor/javascripts/underscore-1.3.1.js"></script><script type="application/javascript" src="vendor/javascripts/backbone-0.9.2.js"></script><script type="application/javascript" src="vendor/javascripts/knockback-0.15.1.js"></script><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Knockback Inspector</h1><a href="http://kmalakoff.github.com/knockback-inspector/">Try the demo</a><h2>Overview</h2><p>This tutorial demonstrates how to use Knockback to create a tree view of potentially recursive models.</p><p>The application is built using <a href="http://brunch.io/">Brunch</a><span> to give it a standardized application structure. Brunch uses Node.js and Node Package Manager (npm) so it works on Windows, Mac, and Linux.</span></p><h2>Building a Scaffold Project</h2><ol><li><span>Install </span><a href="http://nodejs.org/">Node.js</a></li><li><span>Install </span><a href="http://brunch.io/">Brunch</a><pre>npm install -g brunch</pre></li><li><span>Create a new project: </span><pre>brunch new knockback-inspector</pre></li><li><span>Build the new project</span><pre>cd knockback-inspector
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Knockback Inspector</h1><a href="http://kmalakoff.github.com/knockback-inspector/">Try the demo</a><h2>Overview</h2><p>This tutorial demonstrates how to use Knockback to create a tree view of potentially recursive models.</p><p>The application is built using <a href="http://brunch.io/">Brunch</a><span> to give it a standardized application structure. Brunch uses Node.js and Node Package Manager (npm) so it works on Windows, Mac, and Linux.</span></p><h2>Building a Scaffold Project</h2><ol><li><span>Install </span><a href="http://nodejs.org/">Node.js</a></li><li><span>Install </span><a href="http://brunch.io/">Brunch</a><pre>npm install -g brunch</pre></li><li><span>Create a new project: </span><pre>brunch new knockback-inspector</pre></li><li><span>Build the new project</span><pre>cd knockback-inspector
brunch build</pre></li><li><span>Open 'public/index.html' to confirm the project is working. You should see a well-formatted Brunch Welcome! page</span></li><li><span>Now we'll clean out everything we don't need:</span><ul><li><span>Delete everything in the 'app/models' folder</span></li></ul></li><li><span>Now add Knockout.js and Knockback.js:</span><ul><li><span>Put the latest </span><a href="http://knockoutjs.com/">knockout.js</a><span> in 'vendor/scripts'</span></li><li><span>Put the latest </span><a href="http://kmalakoff.github.com/knockback/">knockback.js</a><span> in 'vendor/scripts'</span></li><li><span>Update config.coffee to point to the new files. it should look like:</span><pre>files:
javascripts:
...
View
2 public/docs.html
@@ -1,2 +1,2 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><h2>Welcome to Knockback.js!</h2><p>Please browser the API reference on the left to learn more about the API.</p><p>Also check out the Tutorials (on the top nav bar) to learn how to solve some common use cases or to learn something new!</p><h3>API Coding Conventions</h3><p>Knockback uses the following conventions:</p><ul><li>ClassName</li><li>functionName</li><li>property_name</li><li>'constant string'</li><li>"dynamic string"</li></ul><h3>API Indicators</h3><ul><li><span class="label label-success">class</span><span>: indicates a class function that needs to be called in the form kb.ClassName.functionName()</span></li><p></p><li><span class="label label-inverse">optional</span><span>: indicates that function parameters or options can be left out</span></li><p></p><li><span class="label label-info">factory</span><span>: indicates a factory function is being described. Please note that many of the Knockout classes have corresponding factory functions to reduce verbosity and to improve consistency with Knockout.js</span><p><span>For example, this: </span><pre>ko.observable(model, 'name')</pre><span>is equivalent to: </span><pre>new ko.Observable(model, 'name')</pre></p><p><span>Be careful to use the class if you call the </span><a href="docs_kb_utils.html#observable_instance_of">kb.utils.observableInstanceOf</a><span> utility function </span><span class="label label-important">warning</span></p></li><p></p><li><span class="label label-important">dual purpose</span><span>: indicates that a function is both a getter and a setter</span><p><span>For example, this one gets the model:</span><pre>view_model.model()</pre><span>whereas this one sets the model:</span><pre>view_model.model(model)</pre></p></li></ul></div></div></div></div></div></content><footer class="page"></footer></div></div></body></html>
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><h2>Welcome to Knockback.js!</h2><p>Please browser the API reference on the left to learn more about the API.</p><p>Also check out the Tutorials (on the top nav bar) to learn how to solve some common use cases or to learn something new!</p><h3>API Coding Conventions</h3><p>Knockback uses the following conventions:</p><ul><li>ClassName</li><li>functionName</li><li>property_name</li><li>'constant string'</li><li>"dynamic string"</li><li>CONSTANT_NAME</li></ul><h3>API Indicators</h3><ul><li><span class="label label-success">class</span><span>: indicates a class function that needs to be called in the form kb.ClassName.functionName()</span></li><p></p><li><span class="label label-inverse">optional</span><span>: indicates that function parameters or options can be left out</span></li><p></p><li><span class="label label-info">factory</span><span>: indicates a factory function is being described. Please note that many of the Knockout classes have corresponding factory functions to reduce verbosity and to improve consistency with Knockout.js</span><p><span>For example, this: </span><pre>ko.observable(model, 'name')</pre><span>is equivalent to: </span><pre>new ko.Observable(model, 'name')</pre></p><p><span>Be careful to use the class if you call the </span><a href="docs_kb_utils.html#observable_instance_of">kb.utils.observableInstanceOf</a><span> utility function </span><span class="label label-important">warning</span></p></li><p></p><li><span class="label label-important">dual purpose</span><span>: indicates that a function is both a getter and a setter</span><p><span>For example, this one gets the model:</span><pre>view_model.model()</pre><span>whereas this one sets the model:</span><pre>view_model.model(model)</pre></p></li></ul><h3>Other Things Worth Knowing</h3><ul><li>'kb' and 'Knockback' are aliased so you can use them interchangeably: kb.observable(model, 'name') is the same as Knockback.observable(model,'name')</li></ul></div></div></div></div></div></content><footer class="page"></footer></div></div></body></html>
View
2 public/docs_kb_collection_observable.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type active"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a><li>- <a href="#factory">kb.collectionObservable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#collection">collection</a></li><li>- <a href="#sorted_index">sortedIndex</a></li><li>- <a href="#sort_attribute">sortAttribute</a></li><li>- <a href="#has_view_models">hasViewModels</a></li></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.CollectionObservable--><!--////////////////////////////////--><h2>kb.CollectionObservable</h2><div>Used to generate ViewModels automatically for a collections's models</div><h4>Super class:<a href="#ref_countable"> kb.RefCountable</a></h4><h4>Example:</h4><pre data-for="cs">view_model =
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type active"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a><li>- <a href="#factory">kb.collectionObservable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#collection">collection</a></li><li>- <a href="#sorted_index">sortedIndex</a></li><li>- <a href="#sort_attribute">sortAttribute</a></li><li>- <a href="#has_view_models">hasViewModels</a></li></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.CollectionObservable--><!--////////////////////////////////--><h2>kb.CollectionObservable</h2><div>Used to generate ViewModels automatically for a collections's models</div><h4>Super class:<a href="docs_kb_ref_countable.html"> kb.RefCountable</a></h4><h4>Example:</h4><pre data-for="cs">view_model =
todos: kb.collectionObservable(new Backbone.Collection([{name: 'name1'}, {name: 'name2'}]))</pre><pre data-for="js">var view_model = {
todos: kb.collectionObservable(new Backbone.Collection([{name: 'name1'}, {name: 'name2'}]))
};
View
2 public/docs_kb_default_wrapper.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type active"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a><li>- <a href="#factory">kb.defaultWrapper</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.DefaultWrapper--><!--////////////////////////////////--><h2>kb.DefaultWrapper</h2><div>Used to provide a default value if an observable's value is null or undefined</div><h4>Example:</h4><pre data-for="cs">wrapped_name = kb.defaultWrapper(kb.observable(model, 'name'), &quot;(no name)&quot;)
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type active"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a><li>- <a href="#factory">kb.defaultWrapper</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.DefaultWrapper--><!--////////////////////////////////--><h2>kb.DefaultWrapper</h2><div>Used to provide a default value if an observable's value is null or undefined</div><h4>Example:</h4><pre data-for="cs">wrapped_name = kb.defaultWrapper(kb.observable(model, 'name'), &quot;(no name)&quot;)
</pre><pre data-for="js">var wrapped_name = kb.defaultWrapper(kb.observable(model, 'name'), &quot;(no name)&quot;);
</pre><h3 id="factory">kb.defaultWrapper(target_observable, default_value_observable) <span class="label label-info">factory</span></h3><div>Used to create a new instance</div><h4>Parameters<ol><li><strong>target_observable </strong><span class="type">{ any observable }: </span></li><li><strong>default_value_observable </strong><span class="type">{ an observable or constant }: </span></li></ol></h4><h4>Example:</h4><pre data-for="cs">wrapped_name = kb.formattedObservable(kb.observable(model, 'name'), &quot;(no name)&quot;)
</pre><pre data-for="js">var wrapped_name = kb.formattedObservable(kb.observable(model, 'name'), &quot;(no name)&quot;);
View
2 public/docs_kb_formatted_observable.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type active"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a><li>- <a href="#factory">kb.formattedObservable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.FormattedObservable--><!--////////////////////////////////--><h2>kb.FormattedObservable</h2><div>Used to reformat a string when an argument changes. The format string can also be an observable.</div><h4>Example:</h4><pre data-for="cs">formatted_name = kb.formattedObservable(&quot;{1}...cool!&quot;, kb.observable(model, 'name'))
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type active"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a><li>- <a href="#factory">kb.formattedObservable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.FormattedObservable--><!--////////////////////////////////--><h2>kb.FormattedObservable</h2><div>Used to reformat a string when an argument changes. The format string can also be an observable.</div><h4>Example:</h4><pre data-for="cs">formatted_name = kb.formattedObservable(&quot;{1}...cool!&quot;, kb.observable(model, 'name'))
</pre><pre data-for="js">var formatted_name = kb.formattedObservable(&quot;{1}...cool!&quot;, kb.observable(model, 'name'));
</pre><h3 id="factory">kb.formattedObservable(format, args...) <span class="label label-info">factory</span></h3><div>Used to create a new instance</div><h4>Parameters<ol><li><strong>format: </strong><span> a format string such as &quot;{0} and {1}&quot; where {0} and {1} would be synchronized with the arguments (eg. &quot;Bob and Carol&quot; where {0} is Bob and {1} is Carol)</span></li><li><strong>args: </strong><span> all arguments to be passed to the kb.LocaleManager's get() method</span></li></ol></h4><h4>Example:</h4><pre data-for="cs">formatted_name = kb.formattedObservable(&quot;{1}...cool!&quot;, kb.observable(model, 'name'))
</pre><h3 id="constructor">constructor(format, args...) </h3><div>Used to create a new instance</div><h4>Parameters<ol><li><strong>format: </strong><span> a format string such as &quot;{0} and {1}&quot; where {0} and {1} would be synchronized with the arguments (eg. &quot;Bob and Carol&quot; where {0} is Bob and {1} is Carol)</span></li><li><strong>args: </strong><span> all arguments to be passed to the kb.LocaleManager's get() method</span></li></ol></h4><h4>Example:</h4><pre data-for="cs">formatted_name = new kb.FormattedObservable(&quot;{1}...cool!&quot;, kb.observable(model, 'name'))
View
2 public/docs_kb_localized_observable.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type active"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a><li>- <a href="#extend">extend</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li><li>- <a href="#set_to_default">setToDefault</a></li><li>- <a href="#reset_to_current">resetToCurrent</a></li><li>- <a href="#observed_value">observedValue</a></li></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.LocalizedObservable--><!--////////////////////////////////--><h2>kb.LocalizedObservable</h2><div>Used to generate an observable that automatically changes when the kb.LocaleManager's locale changes</div><h4>Example:</h4><pre data-for="cs">class ShortDateLocalizer extends kb.LocalizedObservable
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type active"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a><li>- <a href="#extend">extend</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li><li>- <a href="#set_to_default">setToDefault</a></li><li>- <a href="#reset_to_current">resetToCurrent</a></li><li>- <a href="#observed_value">observedValue</a></li></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.LocalizedObservable--><!--////////////////////////////////--><h2>kb.LocalizedObservable</h2><div>Used to generate an observable that automatically changes when the kb.LocaleManager's locale changes</div><h4>Example:</h4><pre data-for="cs">class ShortDateLocalizer extends kb.LocalizedObservable
constructor: (value, options, view_model) -&gt;
super; return kb.utils.wrappedObservable(this)
View
2 public/docs_kb_observable.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type active"><a href="docs_kb_observable.html">kb.Observable</a><li>- <a href="#factory">kb.observable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li><li>- <a href="#set_to_default">setToDefault</a></li></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.Observable--><!--////////////////////////////////--><h2>kb.Observable</h2><div>Used to generate a single observable for a model's attribute</div><h4>Example:</h4><pre data-for="cs">ContactViewModel = (model) -&gt;
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type active"><a href="docs_kb_observable.html">kb.Observable</a><li>- <a href="#factory">kb.observable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li><li>- <a href="#set_to_default">setToDefault</a></li></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.Observable--><!--////////////////////////////////--><h2>kb.Observable</h2><div>Used to generate a single observable for a model's attribute</div><h4>Example:</h4><pre data-for="cs">ContactViewModel = (model) -&gt;
@name = kb.observable(model, 'name')
@number = kb.observable(model, {key:'number', read_only: true})
@
View
2 public/docs_kb_observables.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type active"><a href="docs_kb_observables.html">kb.Observables</a><li>- <a href="#factory">kb.observables</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li><li>- <a href="#observable_set_to_default">setToDefault</a></li></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.Observables--><!--////////////////////////////////--><h2>kb.Observables</h2><div>Used to generate observables manually for a model's attributes</div><h4>Example:</h4><pre data-for="cs">ContactViewModel = (model) -&gt;
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type active"><a href="docs_kb_observables.html">kb.Observables</a><li>- <a href="#factory">kb.observables</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li><li>- <a href="#observable_set_to_default">setToDefault</a></li></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.Observables--><!--////////////////////////////////--><h2>kb.Observables</h2><div>Used to generate observables manually for a model's attributes</div><h4>Example:</h4><pre data-for="cs">ContactViewModel = (model) -&gt;
@attribute_observables = kb.observables(model, {
name: {key: 'name', read_only: true}
number: 'number'
View
2 public/docs_kb_ref_countable.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type active"><a href="docs_kb_ref_countable.html">kb.RefCountable</a><li>- <a href="#extend">extend</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#retain">retain</a></li><li>- <a href="#ref_count">refCount</a></li><li>- <a href="#release">release</a></li><li>- <a href="#__destroy">__destroy</a></li></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.RefCountable--><!--////////////////////////////////--><h2>kb.RefCountable</h2><div>The base class for all reference-counted classes</div><h4>Example:</h4><pre data-for="cs">class MyClass extends kb.RefCountable
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type active"><a href="docs_kb_ref_countable.html">kb.RefCountable</a><li>- <a href="#extend">extend</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#retain">retain</a></li><li>- <a href="#ref_count">refCount</a></li><li>- <a href="#release">release</a></li><li>- <a href="#__destroy">__destroy</a></li></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.RefCountable--><!--////////////////////////////////--><h2>kb.RefCountable</h2><div>The base class for all reference-counted classes</div><h4>Example:</h4><pre data-for="cs">class MyClass extends kb.RefCountable
constructor: -&gt;
super
# do something
View
2 public/docs_kb_triggered_observable.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type active"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a><li>- <a href="#factory">kb.triggeredObservable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.TriggeredObservable--><!--////////////////////////////////--><h2>kb.TriggeredObservable</h2><div>Used to recalculate a value when model's attribute changes value</div><h4>Example:</h4><pre data-for="cs">trigger_count = 0
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type active"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a><li>- <a href="#factory">kb.triggeredObservable</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#destroy">destroy</a></li></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.TriggeredObservable--><!--////////////////////////////////--><h2>kb.TriggeredObservable</h2><div>Used to recalculate a value when model's attribute changes value</div><h4>Example:</h4><pre data-for="cs">trigger_count = 0
model = new Backbone.Model()
view_model =
View
2 public/docs_kb_utils.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type active"><a href="docs_kb_utils.html">kb.utils</a><li>- <a href="#release">release</a></li><li>- <a href="#model">wrappedModel</a></li><li>- <a href="#set_to_default">setToDefault</a></li><li>- <a href="#observable_instance_of">observableInstanceOf</a></li><li>- <a href="#observable">wrappedObservable</a></li></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.utils--><!--////////////////////////////////--><h2>kb.utils</h2><div>Library for general-purpose utilities </div><h3 id="release">Knockback.utils.release(obj, [keys_only])</h3><div>Releases any type of view model or observable using the conventions of release(), destroy(), dispose()</div><pre data-for="cs">view_model = kb.viewModel(model)
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type"><a href="docs_kb_view_model.html">kb.ViewModel</a></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type active"><a href="docs_kb_utils.html">kb.utils</a><li>- <a href="#release">release</a></li><li>- <a href="#model">wrappedModel</a></li><li>- <a href="#set_to_default">setToDefault</a></li><li>- <a href="#observable_instance_of">observableInstanceOf</a></li><li>- <a href="#observable">wrappedObservable</a></li></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.utils--><!--////////////////////////////////--><h2>kb.utils</h2><div>Library for general-purpose utilities </div><h3 id="release">Knockback.utils.release(obj, [keys_only])</h3><div>Releases any type of view model or observable using the conventions of release(), destroy(), dispose()</div><pre data-for="cs">view_model = kb.viewModel(model)
kb.utils.release(view_model); view_model = null
todos = kb.collectionObservable(collection)
View
4 public/docs_kb_view_model.html
@@ -1,13 +1,13 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Docs</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/docs.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type active"><a href="docs_kb_view_model.html">kb.ViewModel</a><li>- <a href="#extend">extend</a></li><li>- <a href="#factory">kb.viewModel</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#model">model</a></li></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.ViewModel--><!--////////////////////////////////--><h2>kb.ViewModel</h2><div>Used to generate observables automatically for a model's attributes</div><h4>Super class:<a href="#ref_countable"> kb.RefCountable</a></h4><h4>Example:</h4><pre data-for="cs">view_model = kb.viewModel(new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;}))
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li class="active"><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><div class="api container"><h1>Knockback.js API and Usage Examples</h1><div class="container-fluid"><div class="row-fluid"><div class="span3 api index"><div class="content"><ul><li class="type active"><a href="docs_kb_view_model.html">kb.ViewModel</a><li>- <a href="#extend">extend</a></li><li>- <a href="#factory">kb.viewModel</a></li><li>- <a href="#constructor">constructor</a></li><li>- <a href="#model">model</a></li></li><li class="type"><a href="docs_kb_observable.html">kb.Observable</a></li><li class="type"><a href="docs_kb_observables.html">kb.Observables</a></li><li class="type"><a href="docs_kb_collection_observable.html">kb.CollectionObservable</a></li><li class="type"><a href="docs_kb_utils.html">kb.utils</a></li><li class="type"><a href="docs_kb_localized_observable.html">kb.LocalizedObservable</a></li><li class="type"><a href="docs_kb_formatted_observable.html">kb.FormattedObservable</a></li><li class="type"><a href="docs_kb_default_wrapper.html">kb.DefaultWrapper</a></li><li class="type"><a href="docs_kb_triggered_observable.html">kb.TriggeredObservable</a></li><li class="type"><a href="docs_kb_ref_countable.html">kb.RefCountable</a></li></ul></div></div><div class="span9 api descriptions"><div class="content"><div class="wrapper"><!--////////////////////////////////--><!-- kb.ViewModel--><!--////////////////////////////////--><h2>kb.ViewModel</h2><div>Used to generate observables automatically for a model's attributes</div><h4>Super class:<a href="docs_kb_ref_countable.html"> kb.RefCountable</a></h4><h4>Example:</h4><pre data-for="cs">view_model = kb.viewModel(new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;}))
# Do something then clean up
# kb.utils.release(view_model); view_model = null
</pre><pre data-for="js">var view_model = kb.viewModel(new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;}));
// Do something then clean up
// kb.utils.release(view_model); view_model = null;
-</pre><h3 id="extend">kb.ViewModel::extend(properties, [classProperties]) <span class="label label-success">class</span></h3><div>Used to derive a class in JavaScript (when CoffeeScript is not used)</div><h4>Example:</h4><pre data-for="cs">ViewModel = kb.ViewModel.extend({
+</pre><h4>Tutorials<ul><li><a href="tutorial_kb_view_model.html">kb.ViewModel</a></li></ul></h4><h3 id="extend">kb.ViewModel::extend(properties, [classProperties]) <span class="label label-success">class</span></h3><div>Used to derive a class in JavaScript (when CoffeeScript is not used)</div><h4>Example:</h4><pre data-for="cs">ViewModel = kb.ViewModel.extend({
constructor: (model) -&gt;
kb.ViewModel.prototype.constructor.apply(this, arguments)
@full_name = ko.computed(=&gt;{ return @first_name() + &quot; &quot; + @last_name(); })
View
2 public/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Home</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/index.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="page github_fork_me"><a href="https://github.com/kmalakoff/knockback" class="github_fork_me"><img style="position:absolute; top:0; right:0; border:0; z-index:9999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a></div><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li class="active"><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"><div class="knockback_logo"><div class="lock"><div class="logo"><div class="part left animated fadeInRight"><img src="images/left.svg"></div><div class="part right animated fadeInLeft"><img src="images/right.svg"></div></div><h1><span class="knock animated fadeInRight kb">Knock</span><span class="back animated fadeInLeft kb">back.js</span></h1></div><h2><span class="knock animated fadeIn">brings Knockout.js </span><span class="magic animated fadeIn">magic </span><span class="back animated fadeIn">to Backbone.js</span></h2></div></header><content class="page"><section id="content" class="animated fadeIn"><div class="cols wrapped"><div class="col"><div class="content"><h2>Dependencies</h2><p>Knockback requires Backbone (and therefore Underscore.js) and Knockout.js
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="page github_fork_me"><a href="https://github.com/kmalakoff/knockback" class="github_fork_me"><img style="position:absolute; top:0; right:0; border:0; z-index:9999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a></div><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li class="active"><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"><div class="knockback_logo"><div class="lock"><div class="logo"><div class="part left animated fadeInRight"><img src="images/left.svg"></div><div class="part right animated fadeInLeft"><img src="images/right.svg"></div></div><h1><span class="knock animated fadeInRight kb">Knock</span><span class="back animated fadeInLeft kb">back.js</span></h1></div><h2><span class="knock animated fadeIn">brings Knockout.js </span><span class="magic animated fadeIn">magic </span><span class="back animated fadeIn">to Backbone.js</span></h2></div></header><content class="page"><section id="content" class="animated fadeIn"><div class="cols wrapped"><div class="col"><div class="content"><h2>Dependencies</h2><p>Knockback requires Backbone (and therefore Underscore.js) and Knockout.js
to be already loaded on the page. Backbone.ModelRef is optional for lazy
model loading scenarios.</p></div></div><div class="col"><div class="content"><h2>Features</h2><ul><li>Localization</li><li>Knockout.js' bindings and automagical update</li><li>Backbone's sleek Model definition</li><li>Dynamic collection sorting</li><li>Two-way string formatting</li></ul></div></div><div class="col"><div class="content"><h2>Latest <small>0.15.1</small></h2><ul><li><a href="https://raw.github.com/kmalakoff/knockback/0.15.1/knockback.js">Development</a> <small>71 KB</small></li><li><a href="https://raw.github.com/kmalakoff/knockback/0.15.1/knockback.min.js">Production</a> <small>42 KB</small></li></ul><a href="release_notes.html">Release and Upgrade Notes</a><h2>Source</h2><p>You can find the source on <a href="https://github.com/kmalakoff/knockback">Github</a>. To provide feedback leave a message
or <a href="https://github.com/kmalakoff/knockback/issues">create an issue</a>.</p></div></div></div><!--<div class="content"><h2>Some background</h2><p>Both Knockout and Backbone have their strengths and weaknesses, but together they are amazing!</p><p>At the same time you can have the strong ORM provided by Backbone and the dynamic view-models that Knockout.js offers.</p></div>--><div id="comparison_table"></div><p></p><div class="content"><table class="comparison"><col><col class="mid"><col><col class="ref"><thead><tr><th>Backbone.js</th><th class="kb mid">Knockback.js</th><th>Knockout.js</th><th title="Notes" class="ref">!</th></tr></thead><tbody><tr><td class="yes">Bullet-proof ORM</td><td class="done">&#9754;</td><td class="no">Weak ORM</td><td class="hidden"></td></tr><tr><td class="yes">Built-in Serialization / Deserialization</td><td class="done">&#9754;</td><td class="no">Manual serialization</td><td class="ref"><a title="View description" href="#comparison-1">1</a></td></tr><tr><td class="no"><abbr title="Model/View/Controller">MVC</abbr></td><td class="done">&#9755;</td><td class="yes"><abbr title="Model/View/ViewModel">MVVM</abbr></td><td class="hidden"></td></tr><tr><td class="no">Low level DOM maninulation</td><td class="done">&#9755;</td><td class="yes">Reduced jQuery effort</td><td class="hidden"></td></tr><tr><td class="no">Manual view updating</td><td class="done">&#9755;</td><td class="yes"><code>data-bind</code> based sorcery</td><td class="hidden"></td></tr><tr><td class="yes">Routing and history support</td><td class="done">&#9754;</td><td class="no">No routing</td><td class="ref"><a title="View description" href="#comparison-2">2</a></td></tr><tr><td class="no">Blurred separation between: <br> Views | Controllers</td><td class="own">Proper separation between: <br> Models | Views | Controllers (ViewModels)</td><td class="no">Blurred separation between: <br> Models | Controllers (ViewModels)</td><td class="ref"><a title="View description" href="#comparison-3">3</a></td></tr><tr><td class="hidden"></td><td class="own dependent">Cross-view Model state synchronization</td><td class="hidden"></td><td class="hidden"></td></tr><tr><td class="no">Messy collection/view updating</td><td class="own">Fully sorted and updated collection views</td><td class="hidden"></td><td class="hidden"></td></tr><tr><td class="hidden"></td><td class="own">View settings and control properties</td><td class="hidden"></td><td class="ref"><a title="View description" href="#comparison-4">4</a></td></tr><tr><td class="hidden"></td><td class="own dependent">Localization</td><td class="hidden"></td><td class="hidden"></td></tr></tbody></table></div><div class="content notes"><h2>Notes</h2><section><div id="comparison-1"><h1>Serialization</h1>
View
2 public/release_notes.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Release Notes</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/release_notes.css"><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li class="active"><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section id="0_15_0"><h1>Upgrading to &gt;= 0.15.0 from a previous version</h1><h2>New Stuff</h2><p></p><ol><li>kb.ViewModel now handles nested models (like self-referencing Backbone-Relational.js models)<p></p><pre data-for="cs">class Person extends Backbone.RelationalModel
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li class="active"><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section id="0_15_0"><h1>Upgrading to &gt;= 0.15.0 from a previous version</h1><h2>New Stuff</h2><p></p><ol><li>kb.ViewModel now handles nested models (like self-referencing Backbone-Relational.js models)<p></p><pre data-for="cs">class Person extends Backbone.RelationalModel
relations: [{
type: Backbone.HasMany
key: 'friends'
View
2 public/tutorial_getting_started.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Tutorial: Todos</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/tutorial.css"><script type="application/javascript" src="vendor/javascripts/knockout-2.1.0.debug.js"></script><script type="application/javascript" src="vendor/javascripts/underscore-1.3.1.js"></script><script type="application/javascript" src="vendor/javascripts/backbone-0.9.2.js"></script><script type="application/javascript" src="vendor/javascripts/knockback-0.15.1.js"></script><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li class="active"><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Getting Started with Knockback.js</h1><div><span>In essence, </span><a href="index.html">Knockback.js</a><span> bridges the dynamic DOM bindings of </span><a href="http://knockoutjs.com/">Knockout.js</a><span> with the models, computeds, and routers of </span><a href="http://documentcloud.github.com/backbone/">Backbone.js</a><span>. Well, it also brings some other cool features like localization, default values, and nested view models.</span></div><p></p><h2>Useful Resources</h2><div>Before you start with Knockback.js, we recommend you first get acquainted with Backbone.js and Knockout.js by reviewing their websites (above) and this information:</div><p><ul><li><a href="http://documentcloud.github.com/backbone/docs/todos.html">Documentation of Backbone.js Todos app</a><span> (but skip the section on views)</span></li><li><a href="http://knockoutjs.com/examples/">Live examples of Knockback.js</a></li><li><a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM08">Excellent video walking through Knockback.js</a></li></ul></p><span>Also take a look at this </span><a href="index.html#comparison_table">comparison table</a><span> between the libraries or this </span><a href="http://www.geekdave.com/?p=79">blog entry</a><p></p><h2>Minimal Study</h2><h3>Knockout.js</h3><p><span>Knockout follows the </span><a href="http://en.wikipedia.org/wiki/Model_View_ViewModel">Model_View_ViewModel (MVVM)</a><span> design pattern meaning you specify a ViewModel (Controller) in addition to your data (Model) which encapsulates specific data and logic for your HTML/Template (View).</span></p><div class="container-fluid"><div class="row-fluid"><div class="span8"><h4>View (HTML):</h4><pre>&lt;div id='ko_basic'&gt;
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li class="active"><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Getting Started with Knockback.js</h1><div><span>In essence, </span><a href="index.html">Knockback.js</a><span> bridges the dynamic DOM bindings of </span><a href="http://knockoutjs.com/">Knockout.js</a><span> with the models, computeds, and routers of </span><a href="http://documentcloud.github.com/backbone/">Backbone.js</a><span>. Well, it also brings some other cool features like localization, default values, and nested view models.</span></div><p></p><h2>Useful Resources</h2><div>Before you start with Knockback.js, we recommend you first get acquainted with Backbone.js and Knockout.js by reviewing their websites (above) and this information:</div><p><ul><li><a href="http://documentcloud.github.com/backbone/docs/todos.html">Documentation of Backbone.js Todos app</a><span> (but skip the section on views)</span></li><li><a href="http://knockoutjs.com/examples/">Live examples of Knockback.js</a></li><li><a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM08">Excellent video walking through Knockback.js</a></li></ul></p><span>Also take a look at this </span><a href="index.html#comparison_table">comparison table</a><span> between the libraries or this </span><a href="http://www.geekdave.com/?p=79">blog entry</a><p></p><h2>Minimal Study</h2><h3>Knockout.js</h3><p><span>Knockout follows the </span><a href="http://en.wikipedia.org/wiki/Model_View_ViewModel">Model_View_ViewModel (MVVM)</a><span> design pattern meaning you specify a ViewModel (Controller) in addition to your data (Model) which encapsulates specific data and logic for your HTML/Template (View).</span></p><div class="container-fluid"><div class="row-fluid"><div class="span8"><h4>View (HTML):</h4><pre>&lt;div id='ko_basic'&gt;
&lt;p&gt;First name: &lt;input data-bind=&quot;value: first_name&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Last name: &lt;input data-bind=&quot;value: last_name&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Hello, &lt;span data-bind=&quot;text: full_name&quot;&gt; &lt;/span&gt;!&lt;/p&gt;
View
128 public/tutorial_kb_view_model.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Tutorial: kb.ViewModel</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/tutorial.css"><script type="application/javascript" src="vendor/javascripts/knockout-2.1.0.debug.js"></script><script type="application/javascript" src="vendor/javascripts/underscore-1.3.1.js"></script><script type="application/javascript" src="vendor/javascripts/backbone-0.9.2.js"></script><script type="application/javascript" src="vendor/javascripts/knockback-0.15.1.js"></script><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: kb.ViewModel</h1><p><a href="index.html">Knockback.js</a><span> has a helper called </span><a href="docs_kb_view_model.html">kb.ViewModel</a><span> to automatically generate observables for each attribute</span></p><p><span>Most likely you will use the kb.viewModel(model) </span><span class="label label-info">factory</span><span> method to create a kb.ViewModel.</span></p><p><span class="label label-important">warning</span><span> Unless you specify otherwise, a kb.ViewModel creates an observable for every attribute (including the id) which can cause performance issues on a page with many models. It is recommended to get started quickly with kb.ViewModels and then optimize with specialized classes like kb.Observable and kb.CollectionObservable.</span></p><p></p><h3>Attribute Type: Backbone.Model</h3><p></p><p>If Knockback encounters a attribute that is a Backbone.Model, it automatically creates a kb.ViewModel for it. Because the model can change behind the scenes, you must access the view model using the 'attribute_name()' syntax rather than as a simple property.</p><div class="container-fluid"><div class="row-fluid"><div class="span8"><h4>Views:</h4><pre>&lt;div id='kbvm_bb_model'&gt;
+ &lt;p&gt;
+ &lt;span&gt;First Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: name&quot;/&gt;
+ &lt;/p&gt;
+ &lt;p&gt;
+ &lt;span&gt;Second Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: friend().name&quot;/&gt;
+ &lt;/p&gt;
+
+ &lt;br/&gt;
+
+ &lt;p&gt;
+ &lt;span&gt;Person: &lt;/span&gt;
+ &lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
+ &lt;p&gt;
+ &lt;span&gt;Has this friend: &lt;/span&gt;
+ &lt;span data-bind=&quot;text: friend().name&quot;&gt;&lt;/span&gt;
+ &lt;/p&gt;
+&lt;/div&gt;</pre><h4>ViewModel and Bindings:</h4><pre data-for="cs">bob = new Backbone.Model({name: 'Bob', friend: new Backbone.Model({name: 'Fred'})})
+
+view_model = kb.viewModel(bob)
+
+ko.applyBindings(view_model, $('kbvm_bb_model')[0])</pre><pre data-for="js">// Generated by CoffeeScript 1.3.1
+var bob, view_model;
+
+bob = new Backbone.Model({
+ name: 'Bob',
+ friend: new Backbone.Model({
+ name: 'Fred'
+ })
+});
+
+view_model = kb.viewModel(bob);
+
+ko.applyBindings(view_model, $('kbvm_bb_model')[0]);
+</pre></div><div class="span4"><h4>Live Result</h4><div class="demos_result_box"><div id='kbvm_bb_model'>
+ <p>
+ <span>First Person: </span>
+ <input data-bind="value: name"/>
+ </p>
+ <p>
+ <span>Second Person: </span>
+ <input data-bind="value: friend().name"/>
+ </p>
+
+ <br/>
+
+ <p>
+ <span>Person: </span>
+ <span data-bind="text: name"></span>
+ <p>
+ <span>Has this friend: </span>
+ <span data-bind="text: friend().name"></span>
+ </p>
+</div><script type="application/javascript" src="tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.js"></script></div></div></div></div><p></p><h3>Attribute Type: Backbone.Collection</h3><p></p><p>If Knockback encounters a attribute that is a Backbone.Collection, it automatically creates a kb.CollectionObservable for it and a kb.ViewModel for each of it's models. Because the collection can change behind the scenes, you must access the collection observable using the 'attribute_name()' syntax rather than as a simple property.</p><div class="container-fluid"><div class="row-fluid"><div class="span8"><h4>Views:</h4><pre>&lt;div id='kbvm_bb_collection'&gt;
+ &lt;p&gt;
+ &lt;span&gt;First Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: name&quot;/&gt;
+ &lt;/p&gt;
+ &lt;p&gt;
+ &lt;span&gt;Second Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: friends()[0].name&quot;/&gt;
+ &lt;/p&gt;
+ &lt;p&gt;
+ &lt;span&gt;Third Person: &lt;/span&gt;
+ &lt;input data-bind=&quot;value: friends()[1].name&quot;/&gt;
+ &lt;/p&gt;
+
+ &lt;br/&gt;
+
+ &lt;p&gt;
+ &lt;span&gt;Person: &lt;/span&gt;
+ &lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
+ &lt;p&gt;
+ &lt;span&gt;Has these friends: &lt;/span&gt;
+ &lt;ul data-bind=&quot;foreach: friends&quot;&gt;
+ &lt;li data-bind=&quot;text: name&quot;&gt;&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/p&gt;
+&lt;/div&gt;</pre><h4>ViewModel and Bindings:</h4><pre data-for="cs">bob = new Backbone.Model({name: 'Bob', friends: new Backbone.Collection([new Backbone.Model({name: 'Fred'}), new Backbone.Model({name: 'John'})])})
+
+view_model = kb.viewModel(bob)
+
+ko.applyBindings(view_model, $('#kbvm_bb_collection')[0])</pre><pre data-for="js">// Generated by CoffeeScript 1.3.1
+var bob, view_model;
+
+bob = new Backbone.Model({
+ name: 'Bob',
+ friends: new Backbone.Collection([
+ new Backbone.Model({
+ name: 'Fred'
+ }), new Backbone.Model({
+ name: 'John'
+ })
+ ])
+});
+
+view_model = kb.viewModel(bob);
+
+ko.applyBindings(view_model, $('#kbvm_bb_collection')[0]);
+</pre></div><div class="span4"><h4>Live Result</h4><div class="demos_result_box"><div id='kbvm_bb_collection'>
+ <p>
+ <span>First Person: </span>
+ <input data-bind="value: name"/>
+ </p>
+ <p>
+ <span>Second Person: </span>
+ <input data-bind="value: friends()[0].name"/>
+ </p>
+ <p>
+ <span>Third Person: </span>
+ <input data-bind="value: friends()[1].name"/>
+ </p>
+
+ <br/>
+
+ <p>
+ <span>Person: </span>
+ <span data-bind="text: name"></span>
+ <p>
+ <span>Has these friends: </span>
+ <ul data-bind="foreach: friends">
+ <li data-bind="text: name"></li>
+ </ul>
+ </p>
+</div><script type="application/javascript" src="tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.js"></script></div></div></div></div></section></content><footer class="page"></footer></div></div></body></html>
View
44 public/tutorial_relational_models.html
@@ -1,17 +1,17 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Tutorial: Relational Models</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/tutorial.css"><script type="application/javascript" src="vendor/javascripts/knockout-2.1.0.debug.js"></script><script type="application/javascript" src="vendor/javascripts/underscore-1.3.1.js"></script><script type="application/javascript" src="vendor/javascripts/backbone-0.9.2.js"></script><script type="application/javascript" src="vendor/javascripts/knockback-0.15.1.js"></script><script type="application/javascript" src="vendor/javascripts/backbone-relational-0.5.0.js"></script><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Relational Models</h1><div><a href="index.html">Knockback.js</a><span> supports nested collections that you set up yourself or that are created by </span><a href="https://github.com/PaulUithol/Backbone-relational/">Backbone-Relational</a></div><p></p><h3>Backbone-Relational</h3><p></p><p>Let's look at an example from the Backbone-Relational site:</p><div class="container-fluid"><div class="row-fluid"><div class="span8"><h4>Views:</h4><pre>&lt;p&gt;First Person:
- &lt;input data-bind=&quot;value: occupants()[0].name&quot;/&gt;
- &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[0].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
-&lt;/p&gt;
-&lt;p&gt;Second Person:
- &lt;input data-bind=&quot;value: occupants()[1].name&quot;/&gt;
- &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[1].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
-&lt;/p&gt;
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Relational Models</h1><div><a href="index.html">Knockback.js</a><span> supports nested collections that you set up yourself or that are created by </span><a href="https://github.com/PaulUithol/Backbone-relational/">Backbone-Relational</a></div><p></p><h3>Backbone-Relational</h3><p></p><p>Let's look at an example from the Backbone-Relational site:</p><div class="container-fluid"><div class="row-fluid"><div class="span8"><h4>Views:</h4><pre>&lt;div id='br_relational_models'&gt;
+ &lt;p&gt;First Person:
+ &lt;input data-bind=&quot;value: occupants()[0].name&quot;/&gt;
+ &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[0].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
+ &lt;/p&gt;
+ &lt;p&gt;Second Person:
+ &lt;input data-bind=&quot;value: occupants()[1].name&quot;/&gt;
+ &lt;div&gt;(home: &lt;span data-bind=&quot;text: occupants()[1].livesIn().location&quot;&gt;&lt;/span&gt;)&lt;/div&gt;
+ &lt;/p&gt;
-&lt;br/&gt;
+ &lt;br/&gt;
-&lt;div id='br_relational_models'&gt;
- &lt;p&gt;Location: &lt;span data-bind=&quot;text: location&quot;&gt;&lt;/span&gt;&lt;/p&gt;
+ &lt;p&gt;Location: &lt;input data-bind=&quot;value: location&quot;/&gt;&lt;/p&gt;
&lt;p&gt;
Has these people living there:
&lt;ul data-bind=&quot;foreach: occupants&quot;&gt;
@@ -76,19 +76,19 @@
view_model = kb.viewModel(house);
ko.applyBindings(view_model, $('br_relational_models')[0]);
-</pre></div><div class="span4"><h4>Live Result</h4><div class="demos_result_box"><p>First Person:
- <input data-bind="value: occupants()[0].name"/>
- <div>(home: <span data-bind="text: occupants()[0].livesIn().location"></span>)</div>
-</p>
-<p>Second Person:
- <input data-bind="value: occupants()[1].name"/>
- <div>(home: <span data-bind="text: occupants()[1].livesIn().location"></span>)</div>
-</p>
+</pre></div><div class="span4"><h4>Live Result</h4><div class="demos_result_box"><div id='br_relational_models'>
+ <p>First Person:
+ <input data-bind="value: occupants()[0].name"/>
+ <div>(home: <span data-bind="text: occupants()[0].livesIn().location"></span>)</div>
+ </p>
+ <p>Second Person:
+ <input data-bind="value: occupants()[1].name"/>
+ <div>(home: <span data-bind="text: occupants()[1].livesIn().location"></span>)</div>
+ </p>
-<br/>
+ <br/>
-<div id='br_relational_models'>
- <p>Location: <span data-bind="text: location"></span></p>
+ <p>Location: <input data-bind="value: location"/></p>
<p>
Has these people living there:
<ul data-bind="foreach: occupants">
View
2 public/tutorial_todos.html
@@ -1,5 +1,5 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Knockback.js Tutorial: Todos</title><link rel="stylesheet" href="vendor/stylesheets/bootstrap.min.css"><link rel="stylesheet" href="stylesheets/layout.css"><link rel="stylesheet" href="stylesheets/layout_components.css"><script type="application/javascript" src="vendor/javascripts/jquery-1.7.2.js"></script><link rel="stylesheet" href="stylesheets/tutorial.css"><script type="application/javascript" src="vendor/javascripts/knockout-2.1.0.debug.js"></script><script type="application/javascript" src="vendor/javascripts/underscore-1.3.1.js"></script><script type="application/javascript" src="vendor/javascripts/backbone-0.9.2.js"></script><script type="application/javascript" src="vendor/javascripts/knockback-0.15.1.js"></script><link rel="stylesheet" href="vendor/lib/highlight/highlightjs/stylesheets/dark.css"><script type="application/javascript" src="vendor/lib/highlight/highlightjs/highlight.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlightjs/languages/javascript.js"></script><script type="application/javascript" src="vendor/lib/highlight/highlight-coffee.js"></script><script type="application/javascript" src="vendor/javascripts/bootstrap.js"></script><script type="application/javascript" src="javascripts/interface.js"></script><script type="application/javascript">hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Knockback Todos</h1><a href="http://kmalakoff.github.com/knockback-todos/">Try the demo</a><h2>Todos Architecture</h2><h3>Knockback follows the MVVM Pattern</h3><p>With the MVVM pattern, instead of Model, View, Controller you use Model, View, ViewModel. As an simple approximation using MVC terminology:</p><ul><li>Models are handled by Backbone.Models and Backbone.Collections</li><li>Views are handled by Templates (inline or jQuery)</li><li>ViewModels take the place of Controllers</li></ul><h3>MVVM in &quot;Todos - Classic&quot;</h3><p>The Classic application is an upgraded port of the Backbone Todos application so it has the same ORM with Todo (Backbone.Model) and TodoCollection (Backbone.Collection), but the two views are replaced by various ViewModels and templates for each section of the screen (SettingsViewModel, HeaderViewModel, TodosViewModel, FooterViewModel).</p><h4>Models (Backbone.Model + Backbone.Collection)</h4><ul><li><strong>Todo:</strong><span> provides the data and operations for a Todo like setting its complete state and saving changes on the server/local-storage</span></li><li><strong>TodoCollection:</strong><span> fetches models from the server and provides summary information on the Todo data like how many are completed, remaining, etc</span></li></ul><h4>ViewModels</h4><ul><li><strong>SettingsViewModel:</strong><span> provides properties to select the active filtering for Todos</span></li><li><strong>HeaderViewModel:</strong><span> provides properties to configure the new todo input element and provides a hook to the input element in the template so the ViewModel can create a new Todo Model when Enter is pressed</span></li><li><strong>TodosViewModel:</strong><span> provides the ViewModels to render each Todo in the collection</span></li><li><strong>FooterViewModel:</strong><span> provides and updates the summary stats attributes whenever the Todo list or one of its Todo models changes</span></li></ul><h3>MVVM in &quot;Todos - Extended&quot;</h3><p>This application extends the &quot;Todos - Classic&quot; by adding settings including todo priorities (display colors and orders), language selection and localized text, adding todos list sorting options (by name, created date, and priority). Along with the following changes:</p><h4>Models (Backbone.Model + Backbone.Collection)</h4><ul><li><strong>Priority:</strong><span> provides the data for the priority and color information that is saved on the server/local-storage. It could be a generic Backbone.Model but for clarity and consistency with the mock up, it is given a class.</span></li><li><strong>PriorityCollection:</strong><span> a very basic collection for fetching all of the priority settings</span></li></ul><h4>ViewModels</h4><ul><li><strong>PrioritiesViewModel:</strong><span> provides localized text (that shouldn't be saved to the server) and color properties to the 'priority-setting-template' template</span></li><li><strong>SettingsViewModel:</strong><span>provides the priority settings globally to the application, the current default priority and color for new tasks, a priority ranking to the TodosViewModel for sorting, the selected and available locales from the locale manager ('en', 'fr-FR', 'it-IT') into display strings ('EN', 'FR', 'IT'), todos sorting radio buttons.</span></li><li><strong>HeaderViewModel:</strong><span> upgraded to expose properties for rendering the current default Todo priority and a hook to show/hide the tooltip for selecting the default priority</span></li><li><strong>TodoViewModel:</strong><span> upgraded to expose properties for rendering its Todo priority and a hook to show/hide the tooltip for selecting the Todo priority</span></li></ul><h3>Localization</h3><p>Localization is key for the global applications we create today. It should not be an afterthought!</p><p>Knockback does not provide a locale manager (although there is a sample implementation with this todos application in: models/locale_manager.coffee) because different applications will retrieve their localized strings in different ways. Instead, Knockback provides a localization pattern by using a simpified Backbone.Model-like signature that hooks into Knockback like any other model:</p><ol><li>Emulate a simplified Backbone.Model through a get method like &quot;get: (string_id) -&gt; ...&quot;</li><li>Mixin Backbone.Events '_.extend(LocaleManager.prototype, Backbone.Events)' and trigger Backbone.Events 'change' and 'change:#{string_id}' like:</li></ol><pre data-for="cs">@trigger('change', @)
+hljs.initHighlightingOnLoad();</script></head><body><div id="wrap"><div class="page navbar"><div class="navbar page"><div class="navbar-inner"><div class="container"><a class="brand kb">Knockback.js</a><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="tutorial_getting_started.html">Getting Started</a></li><li><a href="docs.html">Docs</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a><ul class="dropdown-menu"><li></li><a href="tutorial_getting_started.html">Getting Started</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_todos.html">Todos</a></ul></li><li><a href="release_notes.html">Release Notes</a></li></ul><div id="script_language"><div class="separator"><div class="selection codestyle"><div class="option"><input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/><label for="cs-cs">CoffeeScript</label></div><div class="option"><input id="cs-js" type="radio" name="codestyle" value="js"/><label for="cs-js">Javascript</label></div></div></div></div></div></div></div></div></div><div id="wrap"><div class="page container"><header class="page"></header><content class="page"><section><h1>Tutorial: Knockback Todos</h1><a href="http://kmalakoff.github.com/knockback-todos/">Try the demo</a><h2>Todos Architecture</h2><h3>Knockback follows the MVVM Pattern</h3><p>With the MVVM pattern, instead of Model, View, Controller you use Model, View, ViewModel. As an simple approximation using MVC terminology:</p><ul><li>Models are handled by Backbone.Models and Backbone.Collections</li><li>Views are handled by Templates (inline or jQuery)</li><li>ViewModels take the place of Controllers</li></ul><h3>MVVM in &quot;Todos - Classic&quot;</h3><p>The Classic application is an upgraded port of the Backbone Todos application so it has the same ORM with Todo (Backbone.Model) and TodoCollection (Backbone.Collection), but the two views are replaced by various ViewModels and templates for each section of the screen (SettingsViewModel, HeaderViewModel, TodosViewModel, FooterViewModel).</p><h4>Models (Backbone.Model + Backbone.Collection)</h4><ul><li><strong>Todo:</strong><span> provides the data and operations for a Todo like setting its complete state and saving changes on the server/local-storage</span></li><li><strong>TodoCollection:</strong><span> fetches models from the server and provides summary information on the Todo data like how many are completed, remaining, etc</span></li></ul><h4>ViewModels</h4><ul><li><strong>SettingsViewModel:</strong><span> provides properties to select the active filtering for Todos</span></li><li><strong>HeaderViewModel:</strong><span> provides properties to configure the new todo input element and provides a hook to the input element in the template so the ViewModel can create a new Todo Model when Enter is pressed</span></li><li><strong>TodosViewModel:</strong><span> provides the ViewModels to render each Todo in the collection</span></li><li><strong>FooterViewModel:</strong><span> provides and updates the summary stats attributes whenever the Todo list or one of its Todo models changes</span></li></ul><h3>MVVM in &quot;Todos - Extended&quot;</h3><p>This application extends the &quot;Todos - Classic&quot; by adding settings including todo priorities (display colors and orders), language selection and localized text, adding todos list sorting options (by name, created date, and priority). Along with the following changes:</p><h4>Models (Backbone.Model + Backbone.Collection)</h4><ul><li><strong>Priority:</strong><span> provides the data for the priority and color information that is saved on the server/local-storage. It could be a generic Backbone.Model but for clarity and consistency with the mock up, it is given a class.</span></li><li><strong>PriorityCollection:</strong><span> a very basic collection for fetching all of the priority settings</span></li></ul><h4>ViewModels</h4><ul><li><strong>PrioritiesViewModel:</strong><span> provides localized text (that shouldn't be saved to the server) and color properties to the 'priority-setting-template' template</span></li><li><strong>SettingsViewModel:</strong><span>provides the priority settings globally to the application, the current default priority and color for new tasks, a priority ranking to the TodosViewModel for sorting, the selected and available locales from the locale manager ('en', 'fr-FR', 'it-IT') into display strings ('EN', 'FR', 'IT'), todos sorting radio buttons.</span></li><li><strong>HeaderViewModel:</strong><span> upgraded to expose properties for rendering the current default Todo priority and a hook to show/hide the tooltip for selecting the default priority</span></li><li><strong>TodoViewModel:</strong><span> upgraded to expose properties for rendering its Todo priority and a hook to show/hide the tooltip for selecting the Todo priority</span></li></ul><h3>Localization</h3><p>Localization is key for the global applications we create today. It should not be an afterthought!</p><p>Knockback does not provide a locale manager (although there is a sample implementation with this todos application in: models/locale_manager.coffee) because different applications will retrieve their localized strings in different ways. Instead, Knockback provides a localization pattern by using a simpified Backbone.Model-like signature that hooks into Knockback like any other model:</p><ol><li>Emulate a simplified Backbone.Model through a get method like &quot;get: (string_id) -&gt; ...&quot;</li><li>Mixin Backbone.Events '_.extend(LocaleManager.prototype, Backbone.Events)' and trigger Backbone.Events 'change' and 'change:#{string_id}' like:</li></ol><pre data-for="cs">@trigger('change', @)
@trigger(&quot;change:#{key}&quot;, value) for key, value of @translations_by_locale[@locale_identifier]
</pre><pre data-for="js">this.trigger('change', @);
for (var key in this.translations_by_locale[this.locale_identifier]) {
View
17 public/tutorials/kb_view_model/kbvm_bb_collection_view_model_bindings.js
@@ -0,0 +1,17 @@
+// Generated by CoffeeScript 1.3.1
+var bob, view_model;
+
+bob = new Backbone.Model({
+ name: 'Bob',
+ friends: new Backbone.Collection([
+ new Backbone.Model({
+ name: 'Fred'
+ }), new Backbone.Model({
+ name: 'John'
+ })
+ ])
+});
+
+view_model = kb.viewModel(bob);
+
+ko.applyBindings(view_model, $('#kbvm_bb_collection')[0]);
View
13 public/tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.js
@@ -0,0 +1,13 @@
+// Generated by CoffeeScript 1.3.1
+var bob, view_model;
+
+bob = new Backbone.Model({
+ name: 'Bob',
+ friend: new Backbone.Model({
+ name: 'Fred'
+ })
+});
+
+view_model = kb.viewModel(bob);
+
+ko.applyBindings(view_model, $('kbvm_bb_model')[0]);

0 comments on commit e177e8d

Please sign in to comment.