Skip to content
Browse files

Bug fix in docs

  • Loading branch information...
1 parent 90fecf4 commit c3aaa4fc14eaf154f50765b43f0db706e980cf32 @kmalakoff committed Dec 29, 2015
View
20 app_knockback_reference.html
@@ -73,8 +73,8 @@ <h2 id="combining-backbone-js-and-knockout-js-with-knockback-js">Combining Backb
<p>As you should see by now, Backbone.js provides great models and collections ORM functionality plus single-page app routing, Knockout.js provides very dynamic bindings between data and views using ViewModels, and Knockback.js provides the layer between the Backbone ORM and Knockout.js ViewModels.</p>
<p>Because Backbone.Views and Knockout.js ViewModels provide traditional MVC Controller functionality, it is your choice on how to structure your application and whether your continue to use Backbone.Views (personally, I no longer use Backbone.Views).</p>
<p>That said, I have put together a reference application that demonstrates some good principles for routing, memory management, and architectural structure. Let&#39;s get started!</p>
-<h1 id="memory-management">Memory Management</h1>
-<p>Knockback.js requires you to release your view models using &#39;kb.release(view_model)&#39;. The reason for this is that kb.CollectionObservables and kb.ViewModels may have cicular references that need to be broken. Also, kb.release walks your ViewModel properties so it ensures all ko.observables, kb.observables, and the like to be properly released to avoid memory leaks.</p>
+<p>#Memory Management
+Knockback.js requires you to release your view models using &#39;kb.release(view_model)&#39;. The reason for this is that kb.CollectionObservables and kb.ViewModels may have cicular references that need to be broken. Also, kb.release walks your ViewModel properties so it ensures all ko.observables, kb.observables, and the like to be properly released to avoid memory leaks.</p>
<p>That said, you can largely automate this using the approach from <a href="https://github.com/kmalakoff/knockback-navigators">Knockback-Navigators.js</a>!</p>
<p>Knockback-Navigators.js uses an implicit memory management model based on Knockback.js conventions (based on Knockout.js functionality). When an element is created, Knockback binds Knockout&#39;s dispose node callback:</p>
<pre><code>// binds a callback to the node that releases the view model when the node is removed using ko.removeNode
@@ -88,14 +88,14 @@ <h1 id="memory-management">Memory Management</h1>
// OR: Manually
kb.releaseOnNodeRemove(view_model, el);
-</code></pre><h3 id="an-example-">An example:</h3>
+</code></pre><p>###An example:</p>
<p>In the reference application, I manually create the statistics view model:</p>
<pre><code>var statistics_el = kb.renderTemplate(&#39;statistics&#39;, new StatisticsViewModel());
$(&#39;body&#39;).append(statistics_el);
...
ko.releaseNode(statistics_el);
</code></pre><p>Calling ko.releaseNode will not only clean up the element, but also call destroy() on the StatisticsViewModel.</p>
-<h1 id="routing">Routing</h1>
+<p>#Routing</p>
<p>Backbone.Router is quite easy to use with a Knockback. Here is a simple example where there can only be one active page at a time:</p>
<pre><code>window.RouterBackboneJS = Backbone.Router.extend({
constructor: function(page_navigator) {
@@ -126,7 +126,7 @@ <h1 id="routing">Routing</h1>
$(el).addClass(&#39;active&#39;); // CSS {display: none} -&gt; {display: block}
}
});
-</code></pre><h1 id="advanced-routing">Advanced Routing</h1>
+</code></pre><p>#Advanced Routing</p>
<p>You can use <a href="https://github.com/kmalakoff/knockback-navigators">Knockback-Navigators.js</a> to provide more exciting and interesting functionality. Here&#39;s an example with transitions and non-cached pages:</p>
<pre><code>window.RouterBackboneJSExtendedNoCache = Backbone.Router.extend({
constructor: function(page_navigator /* instance of kb.PageNavigatorPanes */) {
@@ -154,7 +154,7 @@ <h1 id="routing">Routing</h1>
});
}));
});
-</code></pre><h1 id="application-architecture">Application Architecture</h1>
+</code></pre><p>#Application Architecture</p>
<p>I try to keep directories organized like in <a href="http://addyosmani.github.com/todomvc/">TodoMVC</a> and <a href="http://brunch.io/">Brunch</a>:</p>
<pre><code>- app
- lib - reusable libraries
@@ -171,9 +171,9 @@ <h1 id="routing">Routing</h1>
}
});
</code></pre><p>If you are making a large app, you could create a single namespace like &#39;window.MyApp = {};&#39; to hang all of your classes from or you could use an AMD loading solution like <a href="">Brunch</a>.</p>
-<h1 id="walkthrough">Walkthrough</h1>
+<p>#Walkthrough</p>
<p>I will skip the extended application-specific code to keep things simple so you might see additional code in the actual application code.</p>
-<h2 id="application-specific">Application-Specific</h2>
+<p>##Application-Specific</p>
<p>Like in Brunch, the appplication is managed using an Application class:</p>
<pre><code>window.Application = (function() {
@@ -208,7 +208,7 @@ <h2 id="application-specific">Application-Specific</h2>
return Application;
})();
-</code></pre><h2 id="models">Models</h2>
+</code></pre><p>##Models</p>
<p>Thing Models use Backbone-Relational to manage ownership:</p>
<pre><code>window.Thing = Backbone.RelationalModel.extend({
url: function() {
@@ -259,7 +259,7 @@ <h2 id="application-specific">Application-Specific</h2>
return kb.CollectionObservable.prototype.constructor.call(this, collection, { view_model: ThingCellViewModel, options: options });
}
});
-</code></pre><h1 id="extended-features">Extended Features</h1>
+</code></pre><p>#Extended Features</p>
<p>In addition to a the Tutorial reference application, you can find more advanced implementations that use <a href="https://github.com/kmalakoff/knockback-navigators">Knockback-Navigators.js</a> for page and embedded pane transitions (under DemoMode):</p>
<ul>
<li><strong>Panes</strong>: adds sliding panes with embedded cells for each relationship instead of simple buttons.</li>
View
2 app_todos.html
@@ -80,7 +80,7 @@
<div class="container">
<header class="page">
</header>
- <content class="page"><h1 id="tutorial-knockback-todos-app">Tutorial: Knockback Todos App</h1>
+ <content class="page"><p>#Tutorial: Knockback Todos App</p>
<p><a href="http://kmalakoff.github.com/knockback-todos-app/">Try the demo</a> or <a href="https://github.com/kmalakoff/knockback-todos-app">Look at the Code</a></p>
<h2 id="todos-architecture">Todos Architecture</h2>
<h3 id="knockback-follows-the-mvvm-pattern">Knockback follows the MVVM Pattern</h3>
View
16 components_knockback_navigators.html
@@ -67,9 +67,9 @@
<p><a href="http://kmalakoff.github.com/knockback-navigators/">Try the demo</a></p>
<h2 id="kb-pagenavigatorpanes">kb.PageNavigatorPanes</h2>
<p>This component provides a page navigator with history and optional transition animations. If you are using Knockout.js or Knockback.js, you can observe changes to the active page (for example, to update menu links).</p>
-<h1 id="usage">Usage</h1>
+<p>#Usage</p>
<p>In order to filter loading of page URLs (eg. not reloading the active page if the URL hasn&#39;t changed) and to manage history (eg. going back if the previous page matches the URL), kb.PageNavigatorPanes provides a &#39;dispatcher(callback)&#39; that is only called when a cached page is not available.</p>
-<h3 id="basic-usage-static-pages-">Basic Usage (Static Pages)</h3>
+<p>###Basic Usage (Static Pages)</p>
<p>If you want to bind to a static page, you should provide the &#39;{no_remove: true}&#39; option so if only hides, but does not detach elements when a page is deactivated.</p>
<p>BackboneJS:</p>
<pre><code>var page_navigator = new kb.PageNavigatorPanes($(&#39;#app&#39;)[0], {no_remove: true});
@@ -85,7 +85,7 @@ <h3 id="basic-usage-static-pages-">Basic Usage (Static Pages)</h3>
Path.map(&#39;#page2&#39;).to(page_navigator.dispatcher(function(){ page_navigator.loadPage($(&#39;#page2&#39;)[0]); }));
Path.listen();
Path.dispatch(window.location.hash);
-</code></pre><h3 id="dynamic-pages-using-knockback-js">Dynamic Pages using Knockback.js</h3>
+</code></pre><p>###Dynamic Pages using Knockback.js</p>
<p>You can dynamic pages either by hand or using Knockback.js&#39;s &#39;kb.renderTemplate(template_name, view_model, options)&#39; function.</p>
<pre><code>...
router.route(&#39;&#39;, null, page_navigator.dispatcher(function(){
@@ -98,7 +98,7 @@ <h3 id="basic-usage-static-pages-">Basic Usage (Static Pages)</h3>
create: function() { return kb.renderTemplate(&#39;page&#39;, new PageViewModel(pages.get(&#39;page1&#39;))) }
}));
...
-</code></pre><h1 id="adding-transition-animations">Adding Transition Animations</h1>
+</code></pre><p>#Adding Transition Animations</p>
<p>You can provide transition animations either during routing (assymetic reverse transitions will not work if the page can be reloaded) or during button clicks.</p>
<p>Transitions during routing:</p>
<pre><code>...
@@ -122,7 +122,7 @@ <h3 id="basic-usage-static-pages-">Basic Usage (Static Pages)</h3>
<pre><code>&lt;button class=&#39;btn btn-small&#39; onclick=&quot;kb.loadUrl(&#39;#page1&#39;, {name: &#39;NavigationSlide&#39;, inverse: true})&quot;&gt; Back&lt;/button&gt;
</code></pre><p>With buttons (Knockout):</p>
<pre><code>&lt;button class=&#39;btn btn-small&#39; data-bind=&quot;click: function(){ kb.loadUrl(&#39;#page1&#39;, {name: &#39;NavigationSlide&#39;, inverse: true}) }&quot;&gt;&lt;span&gt; Back&lt;/span&gt;&lt;/button&gt;
-</code></pre><h1 id="embedding-using-knockout-js-bindings-">Embedding using Knockout.js bindings:</h1>
+</code></pre><p>#Embedding using Knockout.js bindings:</p>
<p>If you are using KnockoutJS or Knockback.js, you can actually bind a page navigator in the HTML using &#39;ko.bindings&#39; and receive a callback to set up routing.</p>
<pre><code>&lt;div data-bind=&quot;PageNavigatorPanes: {loaded: loaded}&quot;&gt;&lt;/div&gt;
@@ -137,11 +137,11 @@ <h3 id="basic-usage-static-pages-">Basic Usage (Static Pages)</h3>
Backbone.history.start({hashChange: true});
</code></pre><h2 id="kb-pagenavigatorsimple">kb.PageNavigatorSimple</h2>
<p>This component provides a page navigator with no history and no transitions. In addition to adding a little structure to your application, if you are using Knockout.js or Knockback.js, you can observe changes to the active page (for example, to update menu links).</p>
-<h1 id="usage">Usage</h1>
+<p>#Usage</p>
<p>The usage is similar to kb.PageNavigatorSimple except you cannot supply transition animations and create functions (there is no history).</p>
<h2 id="kb-panenavigator">kb.PaneNavigator</h2>
<p>This component provides a way to embed moveable panes within you HTML (for example, sliding between items one at a time) with or without transition animations and provides the page transition functionality to kb.PageNavigatorPanes.</p>
-<h1 id="usage">Usage</h1>
+<p>#Usage</p>
<p>You can manually bind a pane-navigator:</p>
<pre><code>&lt;div class=&#39;pane-navigator&#39;&gt;
&lt;div class=&#39;pane cell&#39;&gt;
@@ -159,7 +159,7 @@ <h1 id="usage">Usage</h1>
var pane_navigator = new kb.PaneNavigator(pane_navigator_el, {no_remove: true, transition: &#39;NavigationSlide&#39;});
kb.utils.wrappedPaneNavigator(pane_navigator_el, pane_navigator);
pane_navigator.push(new kb.Pane(pane_navigator_el.children[0]));
-</code></pre><h1 id="optional-knockout-js-bindings-">Optional Knockout.js bindings:</h1>
+</code></pre><p>#Optional Knockout.js bindings:</p>
<pre><code>&lt;div class=&#39;pane-navigator&#39; data-bind=&quot;PaneNavigator: {transition: &#39;NavigationSlide&#39;}&quot;&gt;
&lt;div class=&#39;pane cell&#39;&gt;
&lt;p&gt;Pane1&lt;/p&gt;
View
10 getting_started_dependent_library_basics.html
@@ -139,9 +139,9 @@
</ul>
<div class="tab-content">
<div id="ko_basic_view" class="tab-pane active">
- <pre>&lt;div id='ko_basic'&gt;
- &lt;p&gt;First name: &lt;input class='input-small pull-right' data-bind=&quot;value: first_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
- &lt;p&gt;Last name: &lt;input class='input-small pull-right' data-bind=&quot;value: last_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
+ <pre>&lt;div id=&#39;ko_basic&#39;&gt;
+ &lt;p&gt;First name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: first_name, valueUpdate: &#39;keyup&#39;&quot; /&gt;&lt;/p&gt;
+ &lt;p&gt;Last name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: last_name, valueUpdate: &#39;keyup&#39;&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;
&lt;/div&gt;
</pre>
@@ -156,7 +156,7 @@
return
view_model = new ViewModel(model)
-ko.applyBindings(view_model, $('#ko_basic')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#ko_basic&#39;)[0])</pre>
<pre data-for="js">var model = {first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;};
var ViewModel = function(model) {
@@ -167,7 +167,7 @@
var view_model = new ViewModel(model);
-ko.applyBindings(view_model, $('#ko_basic')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#ko_basic&#39;)[0]);</pre>
</div>
</div>
</div>
View
12 getting_started_introduction.html
@@ -81,24 +81,24 @@
<header class="page">
</header>
<content class="page">
- <section><h1 id="getting-started-with-knockback-js">Getting Started with Knockback.js</h1>
+ <section><p>#Getting Started with Knockback.js</p>
<p>In essence, <a href="index.html">Knockback.js</a> bridges the dynamic DOM bindings of <a href="http://knockoutjs.com/">Knockout.js</a> with the models, computeds, and routers of <a href="http://documentcloud.github.com/backbone/">Backbone.js</a>. It also brings some other cool features like localization, default values, and nested view models!</p>
<p>If you are more of JavaScript developer than a CoffeeScript hipster, check out the JavaScript language toggle for the site (at the top right) on many pages with code and live examples.</p>
-<h1 id="tidbits">Tidbits</h1>
+<p>#Tidbits</p>
<ul>
<li><p>&#39;kb&#39; and &#39;Knockback&#39; can be used interchangeably</p>
</li>
<li><p>Knockback.js uses the following coding conventions: ClassName, functionName, property_name, &#39;constant string&#39;, &quot;dynamic string&quot;, CONSTANT_NAME</p>
</li>
</ul>
-<h1 id="classes-vs-factory-functions">Classes vs Factory Functions</h1>
-<p>You will soon notice that there are different capitalizations for things like kb.viewModel(model, options) and kb.ViewModel. The reason is that to reduce the need of using <code>new</code> and to be more familiar with Knockout, there are factory methods that create the underlying classes.</p>
+<p>#Classes vs Factory Functions
+You will soon notice that there are different capitalizations for things like kb.viewModel(model, options) and kb.ViewModel. The reason is that to reduce the need of using <code>new</code> and to be more familiar with Knockout, there are factory methods that create the underlying classes.</p>
<p>A factory function uses new to create a new instance:</p>
<pre data-for="cs">Knockback.viewModel = (model, options) -> return new Knockback.ViewModel(model, options)
</pre>
<pre data-for="js">Knockback.viewModel = function(model, options) { return new Knockback.ViewModel(model, options); };
-</pre><h1 id="useful-resources">Useful Resources</h1>
+</pre><p>#Useful Resources</p>
<p>Before you start with Knockback.js, we recommend you first get acquainted with Backbone.js and Knockout.js by reviewing their websites (above) and you could also look at these resources:</p>
<ul>
<li><a href="http://documentcloud.github.com/backbone/docs/todos.html">Documentation of Backbone.js Todos app</a>: but skip the section on views</li>
@@ -107,7 +107,7 @@ <h1 id="classes-vs-factory-functions">Classes vs Factory Functions</h1>
<li><a href="http://www.syncfusion.com/resources/techportal/ebooks/knockoutjs">Free eBook on Knockout.js</a>:</li>
</ul>
<p>For Knockback.js, also take a look at this <a href="index.html#comparison_table">comparison table</a> between the libraries or this <a href="http://www.geekdave.com/?p=79">blog entry</a> which provides a good introduction.</p>
-<h1 id="topics">Topics</h1>
+<p>#Topics</p>
<p>You can find the various &#39;Getting Started&#39; topics in the navigation bar above:</p>
<ul>
<li><a href="getting_started_dependent_library_basics.html">Dependent Library Basics</a>: quick overview of Backbone.js and Knockout.js topics relevant to Knockback.js</li>
View
52 getting_started_knockback_basics.html
@@ -96,9 +96,9 @@
</ul>
<div class="tab-content">
<div id="kb_observable_view" class="tab-pane active">
- <pre>&lt;div id='kb_observable'&gt;
- &lt;p&gt;First name: &lt;input class='input-small pull-right' data-bind=&quot;value: first_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
- &lt;p&gt;Last name: &lt;input class='input-small pull-right' data-bind=&quot;value: last_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
+ <pre>&lt;div id=&#39;kb_observable&#39;&gt;
+ &lt;p&gt;First name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: first_name, valueUpdate: &#39;keyup&#39;&quot; /&gt;&lt;/p&gt;
+ &lt;p&gt;Last name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: last_name, valueUpdate: &#39;keyup&#39;&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;
&lt;/div&gt;
</pre>
@@ -107,25 +107,25 @@
<pre data-for="cs">model = new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;})
ViewModel = (model) -&gt;
- @first_name = kb.observable(model, 'first_name')
- @last_name = kb.observable(model, 'last_name')
+ @first_name = kb.observable(model, &#39;first_name&#39;)
+ @last_name = kb.observable(model, &#39;last_name&#39;)
@full_name = ko.computed((-&gt;return &quot;#{this.first_name()} #{this.last_name()}&quot;), @)
return
view_model = new ViewModel(model)
-ko.applyBindings(view_model, $('#kb_observable')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#kb_observable&#39;)[0])</pre>
<pre data-for="js">var model = new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;});
var ViewModel = function(model) {
- this.first_name = kb.observable(model, 'first_name');
- this.last_name = kb.observable(model, 'last_name');
+ this.first_name = kb.observable(model, &#39;first_name&#39;);
+ this.last_name = kb.observable(model, &#39;last_name&#39;);
this.full_name = ko.computed((function() {return &quot;&quot; + (this.first_name()) + &quot; &quot; + (this.last_name());}), this);
};
var view_model = new ViewModel(model);
-ko.applyBindings(view_model, $('#kb_observable')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kb_observable&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -151,9 +151,9 @@
</ul>
<div class="tab-content">
<div id="kb_view_model_computed_view" class="tab-pane active">
- <pre>&lt;div id='kb_view_model_computed'&gt;
- &lt;p&gt;First name: &lt;input class='input-small pull-right' data-bind=&quot;value: first_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
- &lt;p&gt;Last name: &lt;input class='input-small pull-right' data-bind=&quot;value: last_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
+ <pre>&lt;div id=&#39;kb_view_model_computed&#39;&gt;
+ &lt;p&gt;First name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: first_name, valueUpdate: &#39;keyup&#39;&quot; /&gt;&lt;/p&gt;
+ &lt;p&gt;Last name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: last_name, valueUpdate: &#39;keyup&#39;&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;
&lt;/div&gt;</pre>
</div>
@@ -163,13 +163,13 @@
view_model = kb.viewModel(model)
view_model.full_name = ko.computed((-&gt;return &quot;#{@first_name()} #{@last_name()}&quot;), view_model)
-ko.applyBindings(view_model, $('#kb_view_model_computed')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#kb_view_model_computed&#39;)[0])</pre>
<pre data-for="js">var model = new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;});
var view_model = kb.viewModel(model);
view_model.full_name = ko.computed((function() {return &quot;&quot; + (this.first_name()) + &quot; &quot; + (this.last_name());}), view_model);
-ko.applyBindings(view_model, $('#kb_view_model_computed')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kb_view_model_computed&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -204,34 +204,34 @@
</ul>
<div class="tab-content">
<div id="kb_collection_view" class="tab-pane active">
- <pre>&lt;div id='kb_collection' data-bind=&quot;foreach: planets&quot;&gt;
- &lt;p&gt;First name: &lt;input class='input-small pull-right' data-bind=&quot;value: first_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
- &lt;p&gt;Last name: &lt;input class='input-small pull-right' data-bind=&quot;value: last_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
- &lt;p&gt;Hello, &lt;span data-bind=&quot;text: ko.computed(function(){ return $data.first_name() + ' ' + $data.last_name(); })&quot;&gt; &lt;/span&gt;!&lt;/p&gt;
+ <pre>&lt;div id=&#39;kb_collection&#39; data-bind=&quot;foreach: planets&quot;&gt;
+ &lt;p&gt;First name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: first_name, valueUpdate: &#39;keyup&#39;&quot; /&gt;&lt;/p&gt;
+ &lt;p&gt;Last name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: last_name, valueUpdate: &#39;keyup&#39;&quot; /&gt;&lt;/p&gt;
+ &lt;p&gt;Hello, &lt;span data-bind=&quot;text: ko.computed(function(){ return $data.first_name() + &#39; &#39; + $data.last_name(); })&quot;&gt; &lt;/span&gt;!&lt;/p&gt;
&lt;/div&gt;</pre>
</div>
<div id="kb_collection_view_model" class="tab-pane">
- <pre data-for="cs">earth = new Backbone.Model({first_name: 'Planet', last_name: 'Earth'})
-mars = new Backbone.Model({first_name: 'Planet', last_name: 'Mars'})
-the_moon = new Backbone.Model({first_name: 'The', last_name: 'Moon'})
+ <pre data-for="cs">earth = new Backbone.Model({first_name: &#39;Planet&#39;, last_name: &#39;Earth&#39;})
+mars = new Backbone.Model({first_name: &#39;Planet&#39;, last_name: &#39;Mars&#39;})
+the_moon = new Backbone.Model({first_name: &#39;The&#39;, last_name: &#39;Moon&#39;})
planets = new Backbone.Collection([earth, the_moon, mars])
view_model =
planets: kb.collectionObservable(planets, {view_model: kb.ViewModel})
-ko.applyBindings(view_model, $('#kb_collection')[0])</pre>
- <pre data-for="js">var earth = new Backbone.Model({first_name: 'Planet', last_name: 'Earth'});
-var mars = new Backbone.Model({first_name: 'Planet', last_name: 'Mars'});
-var the_moon = new Backbone.Model({first_name: 'The', last_name: 'Moon'});
+ko.applyBindings(view_model, $(&#39;#kb_collection&#39;)[0])</pre>
+ <pre data-for="js">var earth = new Backbone.Model({first_name: &#39;Planet&#39;, last_name: &#39;Earth&#39;});
+var mars = new Backbone.Model({first_name: &#39;Planet&#39;, last_name: &#39;Mars&#39;});
+var the_moon = new Backbone.Model({first_name: &#39;The&#39;, last_name: &#39;Moon&#39;});
var planets = new Backbone.Collection([earth, the_moon, mars]);
var view_model = {
planets: kb.collectionObservable(planets, { view_model: kb.ViewModel })
};
-ko.applyBindings(view_model, $('#kb_collection')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kb_collection&#39;)[0]);</pre>
</div>
</div>
</div>
View
28 getting_started_knockback_important_details.html
@@ -82,8 +82,8 @@
</header>
<content class="page">
<section><h1 id="getting-started-with-knockback-js-knockback-js-important-details">Getting Started with Knockback.js: Knockback.js Important Details</h1>
-<h1 id="inheritance">Inheritance</h1>
-<p>Some Knockback classes are meant to be inherited from. Specifically:</p>
+<p>#Inheritance
+Some Knockback classes are meant to be inherited from. Specifically:</p>
<ul>
<li><a href="doc/class/kb/ViewModel.html">kb.ViewModel</a></li>
<li><a href="doc/class/kb/CollectionObservable.html">kb.CollectionObservable</a></li>
@@ -106,9 +106,9 @@ <h1 id="inheritance">Inheritance</h1>
</ul>
<div class="tab-content">
<div id="kb_view_model_inheritance_view" class="tab-pane active">
- <pre>&lt;div id='kb_view_model_inheritance'&gt;
- &lt;p&gt;First name: &lt;input class='input-small pull-right' data-bind=&quot;value: first_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
- &lt;p&gt;Last name: &lt;input class='input-small pull-right' data-bind=&quot;value: last_name, valueUpdate: 'keyup'&quot; /&gt;&lt;/p&gt;
+ <pre>&lt;div id=&#39;kb_view_model_inheritance&#39;&gt;
+ &lt;p&gt;First name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: first_name, valueUpdate: &#39;keyup&#39;&quot; /&gt;&lt;/p&gt;
+ &lt;p&gt;Last name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: last_name, valueUpdate: &#39;keyup&#39;&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;
&lt;/div&gt;</pre>
</div>
@@ -121,7 +121,7 @@ <h1 id="inheritance">Inheritance</h1>
@full_name = ko.computed((-&gt;return &quot;#{@first_name()} #{@last_name()}&quot;), @)
view_model = new MyViewModel(model)
-ko.applyBindings(view_model, $('#kb_view_model_inheritance')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#kb_view_model_inheritance&#39;)[0])</pre>
<pre data-for="js">var model = new Backbone.Model({first_name: &quot;Planet&quot;, last_name: &quot;Earth&quot;});
var MyViewModel = kb.ViewModel.extend({
@@ -135,7 +135,7 @@ <h1 id="inheritance">Inheritance</h1>
var view_model = new MyViewModel(model);
-ko.applyBindings(view_model, $('#kb_view_model_inheritance')[0]);
+ko.applyBindings(view_model, $(&#39;#kb_view_model_inheritance&#39;)[0]);
</pre>
</div>
</div>
@@ -150,25 +150,25 @@ <h1 id="inheritance">Inheritance</h1>
<script type="application/javascript" src="getting_started/knockback_important_details/kb_view_model_inheritance.js"></script>
</div>
</div>
- </div><h1 id="specifying-mappings-paths-for-nested-models">Specifying Mappings Paths for Nested Models</h1>
+ </div><p>#Specifying Mappings Paths for Nested Models</p>
<p>Because Backbone.Models can have attributes than contain nested Backbone.Models or Backbone.Collections, there are times where you need to specialize the ViewModel you want to use; for example, in a model/collection hierachy with relationships. When you do need to, you can use the <code>factories</code> option when creating a <a href="doc/class/kb/ViewModel.html">kb.ViewModel</a> or <a href="doc/class/kb/CollectionObservable.html">kb.CollectionObservable</a></p>
<pre data-for="cs">view_model = {
people: kb.collectionObservable(new Backbone.Collection([bob, fred]), {
factories:
- 'models': PersonViewModel
- 'models.friends.models': FriendViewModel
+ &#39;models&#39;: PersonViewModel
+ &#39;models.friends.models&#39;: FriendViewModel
})
}</pre>
<pre data-for="js">var view_model = {
people: kb.collectionObservable(new Backbone.Collection([bob, fred]), {
factories: {
- 'models': PersonViewModel,
- 'models.friends.models': FriendViewModel
+ &#39;models&#39;: PersonViewModel,
+ &#39;models.friends.models&#39;: FriendViewModel
}
})
};</pre><p>Please take a look at the <a href="tutorial_nested_models.html">Nested Model Tutorial</a> for more details.</p>
-<h1 id="knockout-observables-foundations">Knockout Observables Foundations</h1>
+<p>#Knockout Observables Foundations</p>
<p>Many Knockback.js classes return Knockout.js observables so their dependencies/subscriptions can and should be managed like any Knockout observable. This is **very important if you choose to extend Knockback classes.</p>
<p>These classes return a ko.observable instead of &#39;this&#39;:</p>
<ul>
@@ -200,7 +200,7 @@ <h1 id="knockout-observables-foundations">Knockout Observables Foundations</h1>
<li><a href="doc/class/kb/ViewModel.html">kb.ViewModel</a></li>
<li><a href="doc/class/kb/Statistics.html">kb.Statistics</a></li>
</ul>
-<h1 id="backbone-model-signatures">Backbone.Model Signatures</h1>
+<p>#Backbone.Model Signatures</p>
<p>Knockback.js does not require Backbone.Models or Backbone.ModelRefs for attribute watching, but requires only Backbone.Model-like signature.</p>
<p>The minimal Backbone.Model signature is:</p>
<ul>
View
2 getting_started_views_view_models_models.html
@@ -67,7 +67,7 @@
<header class="page">
</header>
<content class="page">
- <section><h1 id="models-views-and-viewmodels-one-to-many-relationships">Models, Views, and ViewModels: One-To-Many Relationships</h1>
+ <section><p>#Models, Views, and ViewModels: One-To-Many Relationships</p>
<p>The distinction between Models and ViewModels is important:</p>
<p><em>Backbone.Models encapsulate the data and operations on the data, are serialized/deserialized from/to the server, and are in short Models.
</em>ViewModels provide the attributes and logic to the templates often interacting with the Model data like Controllers. However, they may have their own data and logic that is purely View-related and that the server should never know about.</p>
View
8 index.html
@@ -320,23 +320,23 @@ <h2 id="release-notes">Release Notes</h2>
</div>
<div class="wrapped">
<div class="row-fluid">
- <div class="span4"><h2 id="projects">Projects</h2>
+ <div class="span4"><p>##Projects</p>
<ul>
<li><a href="http://www.vidigami.com/">Vidigami</a></li>
<li><a href="https://github.com/kmalakoff/knockback-site/issues">Submit yours now</a>!</li>
</ul>
</div>
- <div class="span3"><h2 id="frameworks">Frameworks</h2>
+ <div class="span3"><p>##Frameworks</p>
<ul>
<li><a href="https://github.com/thedrow/django-knockback">django-knockback</a></li>
<li><a href="http://pypi.python.org/pypi/js.knockback">js.knockback</a></li>
<li><a href="https://github.com/skie/CakePHP-Knockback-Plugin">CakePHP-Knockback-Plugin</a></li>
</ul>
</div>
- <div class="span4"><h2 id="community-extensions">Community Extensions</h2>
-<p><a href="https://github.com/kmalakoff/knockback-site/issues">Submit yours now</a>!</p>
+ <div class="span4"><p>##Community Extensions
+<a href="https://github.com/kmalakoff/knockback-site/issues">Submit yours now</a>!</p>
</div>
</div>
View
132 tutorial_inject.html
@@ -80,7 +80,7 @@
<div class="container">
<header class="page">
</header>
- <content class="page"><h1 id="tutorial-viewmodel-injection">Tutorial: ViewModel Injection</h1>
+ <content class="page"><p>#Tutorial: ViewModel Injection</p>
<p><a href="index.html">Knockback.js</a> provides an a few helpers to inject ViewModels into your HTML Views in a similar way to <a href="http://angularjs.org/">AngularJS&#39;s</a> <code>ng-app</code> so you can build up an application by dynamically binding observables directly from your HTML.</p>
<p>The following examples show how you might port AngularJS samples to Knockback to help you compare approaches. There&#39;s nothing complicated here, just a <code>kb-inject</code> attribute and a custom <code>inject</code> Knockout binding to add observables to your ViewModel.</p>
<p>The main way to bind a View when your page is loaded, is to use a <code>kb-inject</code> attribute on your HTML elements. You can optionally provide some hooks if you like:</p>
@@ -92,52 +92,52 @@
&lt;/html&gt;
&lt;!-- BIND WITH PARAMETERS - create a custom view model and callback after bind --&gt;
-&lt;html kb-inject=&quot;view_model: {name: ko.observable('')}, afterBinding: yourFunction&quot;&gt;
+&lt;html kb-inject=&quot;view_model: {name: ko.observable(&#39;&#39;)}, afterBinding: yourFunction&quot;&gt;
&lt;!-- YOUR VIEW HERE !! --&gt;
&lt;/html&gt;
</pre><p>In addition to help you inject observables to your ViewModel, you can use the &#39;inject&#39; custom binding. It accepts an object to extend your ViewModel or a function of the form yourFunction(view_model, element) to allow you to extend the view model by hand:</p>
<pre>&lt;!-- INJECT A TO EXTEND YOUR VIEW MODEL --&gt;
-&lt;div data-bind=&quot;inject: {name: ko.observable('')}&quot;&gt;&lt;/div&gt;
+&lt;div data-bind=&quot;inject: {name: ko.observable(&#39;&#39;)}&quot;&gt;&lt;/div&gt;
&lt;!-- INJECT A USING A CUSTOM FUNCTION --&gt;
&lt;div data-bind=&quot;inject: ProjectAppController&quot;&gt;&lt;/div&gt;
</pre><p>That&#39;s basically it...it&#39;s really a lot easier than memorizing or looking up a large number of custom <code>ng-{something}</code> bindings and you can reuse your knowledge of Knockback.js, Knockout.js, and Backbone.js!</p>
-<h2 id="getting-started-hello-world-">Getting Started - Hello World!</h2>
+<p>##Getting Started - Hello World!</p>
<p>There are a few helpers to get us started:</p>
<pre data-for="cs"># helper to toggle classes
-ko.bindingHandlers['classes'] =
+ko.bindingHandlers[&#39;classes&#39;] =
update: (element, value_accessor) -&gt;
for key, state of ko.utils.unwrapObservable(value_accessor())
- $(element)[if ko.utils.unwrapObservable(state) then 'addClass' else 'removeClass'](key)
+ $(element)[if ko.utils.unwrapObservable(state) then &#39;addClass&#39; else &#39;removeClass&#39;](key)
return
# helpers to manage push state
window.loadUrl = (url) -&gt; Backbone.history.loadUrl(url)
window.loadUrlFn = (url) -&gt; return -&gt; Backbone.history.loadUrl(url)</pre>
<pre data-for="js">// helper to toggle classes
-ko.bindingHandlers['classes'] = {
+ko.bindingHandlers[&#39;classes&#39;] = {
update: function(element, value_accessor) {
var classes = ko.utils.unwrapObservable(value_accessor());
for (var key in classes) {
- $(element)[ko.utils.unwrapObservable(classes[key]) ? 'addClass' : 'removeClass'](key);
+ $(element)[ko.utils.unwrapObservable(classes[key]) ? &#39;addClass&#39; : &#39;removeClass&#39;](key);
}
}};
// helpers to manage push state
window.loadUrl = function(url) { return Backbone.history.loadUrl(url); };
-window.loadUrlFn = function(url) { return function() { return Backbone.history.loadUrl(url); }; };</pre><h2 id="hello-example">Hello Example</h2>
+window.loadUrlFn = function(url) { return function() { return Backbone.history.loadUrl(url); }; };</pre><p>##Hello Example</p>
<p>This example uses the &#39;kb-inject&#39; attribute to seed a root application ViewModel with a yourName observable (like a more flexible ng-model binding).</p>
<div class="row-fluid">
<div class="span8">
<h4>View (HTML)</h4>
- <pre>&lt;div kb-inject=&quot;yourName: ko.observable('')&quot;&gt;
+ <pre>&lt;div kb-inject=&quot;yourName: ko.observable(&#39;&#39;)&quot;&gt;
&lt;label&gt;Name:&lt;/label&gt;
- &lt;input type=&quot;text&quot; data-bind=&quot;value: yourName, valueUpdate: 'keyup'&quot; placeholder=&quot;Enter a name here&quot;&gt;
+ &lt;input type=&quot;text&quot; data-bind=&quot;value: yourName, valueUpdate: &#39;keyup&#39;&quot; placeholder=&quot;Enter a name here&quot;&gt;
&lt;hr&gt;
- &lt;h1 data-bind=&quot;text: 'Hello ' + yourName() + '!'&quot;&gt;&lt;/h1&gt;
+ &lt;h1 data-bind=&quot;text: &#39;Hello &#39; + yourName() + &#39;!&#39;&quot;&gt;&lt;/h1&gt;
&lt;/div&gt;</pre>
</div>
<div class="span4">
@@ -152,8 +152,8 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
</div>
</div><p>You could have just as easily written the first line like:</p>
- <pre>&lt;div data-bind=&quot;inject: {yourName: ko.observable('')}&quot; kb-inject&gt;
-</pre><h2 id="todo-example">Todo Example</h2>
+ <pre>&lt;div data-bind=&quot;inject: {yourName: ko.observable(&#39;&#39;)}&quot; kb-inject&gt;
+</pre><p>##Todo Example</p>
<p>The todo example uses a custom &#39;TodoCtrl&#39; inject function to add some functions and observables to your view model. Then you can bind them to your HTML using standard Knockout bindings.</p>
<div class="row-fluid">
@@ -168,7 +168,7 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
<pre>&lt;div kb-inject&gt;
&lt;h2&gt;Todo&lt;/h2&gt;
&lt;div data-bind=&quot;inject: TodoCtrl&quot;&gt;
- &lt;span data-bind=&quot;text: remaining() + ' of ' + todos().length + ' remaining'&quot;&gt;&lt;/span&gt;
+ &lt;span data-bind=&quot;text: remaining() + &#39; of &#39; + todos().length + &#39; remaining&#39;&quot;&gt;&lt;/span&gt;
[ &lt;a href=&quot;&quot; data-bind=&quot;click: archive&quot;&gt;archive&lt;/a&gt; ]
&lt;ul class=&quot;unstyled&quot; data-bind=&quot;foreach: todos&quot;&gt;
&lt;li&gt;
@@ -187,14 +187,14 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
<div id="kbi_todo_view_model" class="tab-pane">
<pre data-for="cs">TodoCtrl = (view_model) -&gt;
view_model.todos = ko.observableArray([
- {text:'learn knockback', done:ko.observable(true)},
- {text:'build a knockback app', done:ko.observable(false)}]
+ {text:&#39;learn knockback&#39;, done:ko.observable(true)},
+ {text:&#39;build a knockback app&#39;, done:ko.observable(false)}]
)
- view_model.todoText = ko.observable('')
+ view_model.todoText = ko.observable(&#39;&#39;)
view_model.addTodo = -&gt;
view_model.todos.push({text:view_model.todoText(), done:ko.observable(false)})
- view_model.todoText('')
+ view_model.todoText(&#39;&#39;)
view_model.remaining = ko.computed(-&gt;
return _.reduce(view_model.todos(), ((count, todo) -&gt; return count + (if todo.done() then 0 else 1)), 0)
@@ -205,14 +205,14 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
return</pre>
<pre data-for="js">var TodoCtrl = function(view_model) {
view_model.todos = ko.observableArray([
- {text: 'learn knockback', done: ko.observable(true)},
- {text: 'build a knockback app', done: ko.observable(false)}
+ {text: &#39;learn knockback&#39;, done: ko.observable(true)},
+ {text: &#39;build a knockback app&#39;, done: ko.observable(false)}
]);
- view_model.todoText = ko.observable('');
+ view_model.todoText = ko.observable(&#39;&#39;);
view_model.addTodo = function() {
view_model.todos.push({text: view_model.todoText(), done: ko.observable(false)});
- view_model.todoText('');
+ view_model.todoText(&#39;&#39;);
};
view_model.remaining = ko.computed(function() {
@@ -256,7 +256,7 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
</div>
</div>
</div>
- </div><h2 id="project-example">Project Example</h2>
+ </div><p>##Project Example</p>
<p>Before we start the example, you should review the <a href="doc/class/kb/Validation.html">validations documentation</a>.
Now on with the example! This example shows:</p>
<ul>
@@ -343,13 +343,13 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
<div id="kbi_project_list_view" class="tab-pane">
<pre>&lt;script type=&quot;text/x-jquery-tmpl&quot; id=&quot;list.html&quot;&gt;
&lt;div&gt;
- &lt;input type=&quot;text&quot; class=&quot;search-query&quot; placeholder=&quot;Search&quot; data-bind=&quot;value: filter, valueUpdate: 'keyup'&quot;&gt;
+ &lt;input type=&quot;text&quot; class=&quot;search-query&quot; placeholder=&quot;Search&quot; data-bind=&quot;value: filter, valueUpdate: &#39;keyup&#39;&quot;&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Project&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
- &lt;th&gt;&lt;a data-bind=&quot;click: loadUrlFn('new')&quot;&gt;&lt;i class=&quot;icon-plus-sign&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
+ &lt;th&gt;&lt;a data-bind=&quot;click: loadUrlFn(&#39;new&#39;)&quot;&gt;&lt;i class=&quot;icon-plus-sign&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
@@ -358,7 +358,7 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
&lt;td&gt;&lt;a data-bind=&quot;attr: {href: site}, text: name&quot;target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td data-bind=&quot;text: description&quot;&gt;&lt;/td&gt;
&lt;td&gt;
- &lt;a data-bind=&quot;click: loadUrlFn('edit/' + id())&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt;&lt;/a&gt;
+ &lt;a data-bind=&quot;click: loadUrlFn(&#39;edit/&#39; + id())&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- /ko --&gt;
@@ -372,14 +372,14 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
&lt;form name=&quot;myForm&quot; data-bind=&quot;inject: kb.formValidator&quot;&gt;
&lt;div class=&quot;control-group&quot; data-bind=&quot;classes: {error: $myForm.name().$error_count}&quot;&gt;
&lt;label&gt;Name&lt;/label&gt;
- &lt;input type=&quot;text&quot; name=&quot;name&quot; data-bind=&quot;value: name, valueUpdate: 'keyup'&quot; required&gt;
+ &lt;input type=&quot;text&quot; name=&quot;name&quot; data-bind=&quot;value: name, valueUpdate: &#39;keyup&#39;&quot; required&gt;
&lt;span data-bind=&quot;visible: $myForm.name().required&quot; class=&quot;help-inline&quot;&gt;
Required&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;control-group&quot; data-bind=&quot;classes: {error: $myForm.site().$error_count}&quot;&gt;
&lt;label&gt;Website&lt;/label&gt;
- &lt;input type=&quot;url&quot; name=&quot;site&quot; data-bind=&quot;value: site, valueUpdate: 'keyup'&quot; required&gt;
+ &lt;input type=&quot;url&quot; name=&quot;site&quot; data-bind=&quot;value: site, valueUpdate: &#39;keyup&#39;&quot; required&gt;
&lt;span data-bind=&quot;visible: $myForm.site().required&quot; class=&quot;help-inline&quot;&gt;
Required&lt;/span&gt;
&lt;span data-bind=&quot;visible: $myForm.site().url&quot; class=&quot;help-inline&quot;&gt;
@@ -390,7 +390,7 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
&lt;textarea name=&quot;description&quot; data-bind=&quot;value: description&quot;&gt;&lt;/textarea&gt;
&lt;br&gt;
- &lt;a class=&quot;btn&quot; data-bind=&quot;click: loadUrlFn('')&quot;&gt;Cancel&lt;/a&gt;
+ &lt;a class=&quot;btn&quot; data-bind=&quot;click: loadUrlFn(&#39;&#39;)&quot;&gt;Cancel&lt;/a&gt;
&lt;button data-bind=&quot;click: save, disable: isClean() || $myForm.$error_count()&quot;
class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
&lt;button data-bind=&quot;click: onDelete&quot;
@@ -400,7 +400,7 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
</div>
<div id="kbi_project_app_controller" class="tab-pane">
<pre data-for="cs">ProjectAppController = (view_model, element) -&gt;
- knockback_model = {id: 'id_kb', name: 'Knockback.js', description: 'Backbone.js + Knockout.js is amazingly!', site: 'http://kmalakoff.github.com/knockback/'}
+ knockback_model = {id: &#39;id_kb&#39;, name: &#39;Knockback.js&#39;, description: &#39;Backbone.js + Knockout.js is amazingly!&#39;, site: &#39;http://kmalakoff.github.com/knockback/&#39;}
projects = new ProjectCollection([knockback_model])
projects.fetch()
@@ -410,24 +410,24 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
element.appendChild(active_el = el)
router = new Backbone.Router()
- router.route('*path', null, -&gt; _.defer(loadUrlFn('')))
- router.route('', null, -&gt;
- loadPage(kb.renderTemplate('list.html', new ProjectListViewModel(projects)))
+ router.route(&#39;*path&#39;, null, -&gt; _.defer(loadUrlFn(&#39;&#39;)))
+ router.route(&#39;&#39;, null, -&gt;
+ loadPage(kb.renderTemplate(&#39;list.html&#39;, new ProjectListViewModel(projects)))
)
- router.route('new', null, -&gt;
- loadPage(kb.renderTemplate('detail.html', new ProjectViewModel(new Project(), projects)))
+ router.route(&#39;new&#39;, null, -&gt;
+ loadPage(kb.renderTemplate(&#39;detail.html&#39;, new ProjectViewModel(new Project(), projects)))
)
- router.route('edit/:projectId', null, (project_id) -&gt;
- (loadUrl(''); return) unless project = projects.get(project_id) # not a valid project
- loadPage(kb.renderTemplate('detail.html', new ProjectViewModel(project)))
+ router.route(&#39;edit/:projectId&#39;, null, (project_id) -&gt;
+ (loadUrl(&#39;&#39;); return) unless project = projects.get(project_id) # not a valid project
+ loadPage(kb.renderTemplate(&#39;detail.html&#39;, new ProjectViewModel(project)))
)
return
# start outside of the binding loop
projectAppStartRouting = -&gt;
Backbone.history.start({pushState: true, root: window.location.pathname}) unless Backbone.History.started</pre>
<pre data-for="js">var ProjectAppController = function(view_model, element) {
- var knockback_model = {id: 'id_kb', name: 'Knockback.js', description: 'Backbone.js + Knockout.js is amazingly!', site: 'http://kmalakoff.github.com/knockback/'};
+ var knockback_model = {id: &#39;id_kb&#39;, name: &#39;Knockback.js&#39;, description: &#39;Backbone.js + Knockout.js is amazingly!&#39;, site: &#39;http://kmalakoff.github.com/knockback/&#39;};
var projects = new ProjectCollection([knockback_model]);
projects.fetch();
@@ -437,17 +437,17 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
return element.appendChild(active_el = el);
};
router = new Backbone.Router();
- router.route('*path', null, function() {_.defer(loadUrlFn('')); });
- router.route('', null, function() {
- return loadPage(kb.renderTemplate('list.html', new ProjectListViewModel(projects)));
+ router.route(&#39;*path&#39;, null, function() {_.defer(loadUrlFn(&#39;&#39;)); });
+ router.route(&#39;&#39;, null, function() {
+ return loadPage(kb.renderTemplate(&#39;list.html&#39;, new ProjectListViewModel(projects)));
});
- router.route('new', null, function() {
- return loadPage(kb.renderTemplate('detail.html', new ProjectViewModel(new Project(), projects)));
+ router.route(&#39;new&#39;, null, function() {
+ return loadPage(kb.renderTemplate(&#39;detail.html&#39;, new ProjectViewModel(new Project(), projects)));
});
- router.route('edit/:projectId', null, function(project_id) {
+ router.route(&#39;edit/:projectId&#39;, null, function(project_id) {
var project;
- if (!(project = projects.get(project_id))) {loadUrl(''); return; } // not a valid project
- return loadPage(kb.renderTemplate('detail.html', new ProjectViewModel(project)));
+ if (!(project = projects.get(project_id))) {loadUrl(&#39;&#39;); return; } // not a valid project
+ return loadPage(kb.renderTemplate(&#39;detail.html&#39;, new ProjectViewModel(project)));
});
};
@@ -459,8 +459,8 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
};</pre>
</div>
<div id="kbi_project_collection" class="tab-pane">
- <pre data-for="cs">PROJECTS_BASE_URL = 'https://api.mongolab.com/api/1/databases/angularjs/collections/projects'
-PROJECTS_API_KEY_PARAM = 'apiKey=4f847ad3e4b08a2eed5f3b54'
+ <pre data-for="cs">PROJECTS_BASE_URL = &#39;https://api.mongolab.com/api/1/databases/angularjs/collections/projects&#39;
+PROJECTS_API_KEY_PARAM = &#39;apiKey=4f847ad3e4b08a2eed5f3b54&#39;
Project = Backbone.Model.extend({
url: -&gt; &quot;#{PROJECTS_BASE_URL}/#{@id}?#{PROJECTS_API_KEY_PARAM}&quot;
@@ -470,8 +470,8 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
parse: (data) -&gt; return _.map(data, (item) -&gt; item.id = item._id.$oid; return item) # remap the ids
model: Project
})</pre>
- <pre data-for="js">var PROJECTS_BASE_URL = 'https://api.mongolab.com/api/1/databases/angularjs/collections/projects';
-var PROJECTS_API_KEY_PARAM = 'apiKey=4f847ad3e4b08a2eed5f3b54';
+ <pre data-for="js">var PROJECTS_BASE_URL = &#39;https://api.mongolab.com/api/1/databases/angularjs/collections/projects&#39;;
+var PROJECTS_API_KEY_PARAM = &#39;apiKey=4f847ad3e4b08a2eed5f3b54&#39;;
var Project = Backbone.Model.extend({
url: function() { return &quot;&quot; + PROJECTS_BASE_URL + &quot;/&quot; + this.id + &quot;?&quot; + PROJECTS_API_KEY_PARAM;}
@@ -483,72 +483,72 @@ <h1 data-bind="text: 'Hello ' + yourName() + '!'"></h1>
</div>
<div id="kbi_project_list_view_model" class="tab-pane">
<pre data-for="cs">ProjectListViewModel = (projects) -&gt;
- @filter = ko.observable('')
+ @filter = ko.observable(&#39;&#39;)
@projects = kb.collectionObservable(projects, {
view_model: ProjectViewModel
- sort_attribute: 'name'
+ sort_attribute: &#39;name&#39;
filters: [(model) =&gt;
return true unless filter = @filter()
- return (model.get('name').search(filter) &gt;= 0)
+ return (model.get(&#39;name&#39;).search(filter) &gt;= 0)
]
})
return</pre>
<pre data-for="js">var ProjectListViewModel = function(projects) {
var _this = this;
- this.filter = ko.observable('');
+ this.filter = ko.observable(&#39;&#39;);
this.projects = kb.collectionObservable(projects, {
view_model: ProjectViewModel,
- sort_attribute: 'name',
+ sort_attribute: &#39;name&#39;,
filters: [function(model) {
var filter = _this.filter();
if (!filter) return true;
- return model.get('name').search(filter) &gt;= 0;
+ return model.get(&#39;name&#39;).search(filter) &gt;= 0;
}]
});
};</pre>
</div>
<div id="kbi_project_view_model" class="tab-pane">
<pre data-for="cs">ProjectViewModel = kb.ViewModel.extend({
constructor: (project, projects) -&gt;
- kb.ViewModel.prototype.constructor.call(@, project, {requires: ['id', 'name', 'site', 'description']})
+ kb.ViewModel.prototype.constructor.call(@, project, {requires: [&#39;id&#39;, &#39;name&#39;, &#39;site&#39;, &#39;description&#39;]})
start_attributes = _.clone(project.attributes)
- @model_changed = kb.triggeredObservable(project, 'change')
+ @model_changed = kb.triggeredObservable(project, &#39;change&#39;)
@isClean = ko.computed(=&gt;
@model_changed() # create a depdendency
return _.isEqual(start_attributes, project.attributes)
)
@onDelete = -&gt; # destroy() is reserved for ViewModel lifecycle
project.destroy() unless project.isNew()
- loadUrl('')
+ loadUrl(&#39;&#39;)
return false
@save = -&gt;
projects.add(project) if project.isNew()
project.save()
- loadUrl('')
+ loadUrl(&#39;&#39;)
return false
return
})</pre>
<pre data-for="js">var ProjectViewModel = kb.ViewModel.extend({
constructor: function(project, projects) {
var _this = this;
- kb.ViewModel.prototype.constructor.call(this, project, {requires: ['id', 'name', 'site', 'description']});
+ kb.ViewModel.prototype.constructor.call(this, project, {requires: [&#39;id&#39;, &#39;name&#39;, &#39;site&#39;, &#39;description&#39;]});
var start_attributes = _.clone(project.attributes);
- this.model_changed = kb.triggeredObservable(project, 'change');
+ this.model_changed = kb.triggeredObservable(project, &#39;change&#39;);
this.isClean = ko.computed(function() {
_this.model_changed(); //create a depdendency
return _.isEqual(start_attributes, project.attributes);
});
this.onDelete = function() { // destroy() is reserved for ViewModel lifecycle
if (!project.isNew()) project.destroy();
- loadUrl('');
+ loadUrl(&#39;&#39;);
return false;
};
this.save = function() {
if (project.isNew()) projects.add(project);
project.save();
- loadUrl('');
+ loadUrl(&#39;&#39;);
return false;
};
}
View
104 tutorial_kb_collection_observable.html
@@ -80,9 +80,9 @@
<div class="container">
<header class="page">
</header>
- <content class="page"><h1 id="tutorial-kb-collectionobservable">Tutorial: kb.CollectionObservable</h1>
+ <content class="page"><p>#Tutorial: kb.CollectionObservable</p>
<p><a href="index.html">Knockback.js</a> provides an <a href="doc/class/kb/CollectionObservable.html">kb.CollectionObservable</a> that watches Backbone.Collections when models are added, removed, and changed. In addition, kb.CollectionObservables can be used to sort models independently from the Backbone.Collection order, to bind HTML select elements, to render/edit <a href="tutorial_relational_models.html">model relationships</a>, and to filter collections.</p>
-<h2 id="sorting-models">Sorting Models</h2>
+<p>##Sorting Models</p>
<p>You can sort models using an <a href="doc/class/kb/CollectionObservable.html#sortAttribute-dynamic">attribute name</a> or by providing a <a href="doc/class/kb/CollectionObservable.html#sortedIndex-dynamic">sorted_index function</a>.</p>
<div class="row-fluid">
@@ -93,44 +93,44 @@ <h2 id="sorting-models">Sorting Models</h2>
</ul>
<div class="tab-content">
<div id="kbco_sorting_view" class="tab-pane active">
- <pre>&lt;div id='kbco_sorting' &gt;
+ <pre>&lt;div id=&#39;kbco_sorting&#39; &gt;
&lt;legend&gt;Sort Attribute
&lt;select data-bind=&quot;options: sort_attributes, selectedOptions: sort_attribute&quot;&gt;&lt;/select&gt;
&lt;/legend&gt;
&lt;div data-bind=&quot;foreach: people&quot;&gt;
- &lt;div class='row-fluid'&gt;
- &lt;div class='span5'&gt;
+ &lt;div class=&#39;row-fluid&#39;&gt;
+ &lt;div class=&#39;span5&#39;&gt;
&lt;span&gt;First: &lt;/span&gt;
- &lt;input class='input-small' data-bind=&quot;value: first, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small&#39; data-bind=&quot;value: first, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/div&gt;
- &lt;div class='offset1 span5'&gt;
+ &lt;div class=&#39;offset1 span5&#39;&gt;
&lt;span&gt;Last: &lt;/span&gt;
- &lt;input class='input-small' data-bind=&quot;value: last, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small&#39; data-bind=&quot;value: last, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div id="kbco_sorting_view_model" class="tab-pane">
- <pre data-for="cs">people = new Backbone.Collection([{first: 'Jeremy', last: 'Sanderson'}, {first: 'Steven', last: 'Ashkenas'}])
-sort_attribute = ko.observable('first')
+ <pre data-for="cs">people = new Backbone.Collection([{first: &#39;Jeremy&#39;, last: &#39;Sanderson&#39;}, {first: &#39;Steven&#39;, last: &#39;Ashkenas&#39;}])
+sort_attribute = ko.observable(&#39;first&#39;)
view_model =
sort_attribute: sort_attribute
- sort_attributes: ko.observableArray(['first', 'last'])
+ sort_attributes: ko.observableArray([&#39;first&#39;, &#39;last&#39;])
people: kb.collectionObservable(people, {sort_attribute: sort_attribute})
-ko.applyBindings(view_model, $('#kbco_sorting')[0])</pre>
- <pre data-for="js">var people = new Backbone.Collection([{first: 'Jeremy', last: 'Sanderson'}, {first: 'Steven', last: 'Ashkenas'}]);
-var sort_attribute = ko.observable('first');
+ko.applyBindings(view_model, $(&#39;#kbco_sorting&#39;)[0])</pre>
+ <pre data-for="js">var people = new Backbone.Collection([{first: &#39;Jeremy&#39;, last: &#39;Sanderson&#39;}, {first: &#39;Steven&#39;, last: &#39;Ashkenas&#39;}]);
+var sort_attribute = ko.observable(&#39;first&#39;);
var view_model = {
sort_attribute: sort_attribute,
- sort_attributes: ko.observableArray(['first', 'last']),
+ sort_attributes: ko.observableArray([&#39;first&#39;, &#39;last&#39;]),
people: kb.collectionObservable(people, {sort_attribute: sort_attribute})
};
-ko.applyBindings(view_model, $('#kbco_sorting')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kbco_sorting&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -156,7 +156,7 @@ <h2 id="sorting-models">Sorting Models</h2>
<script type="application/javascript" src="tutorials/kb_collection_observable/kbco_sorting_view_model_bindings.js"></script>
</div>
</div>
- </div><h2 id="filtering-models">Filtering Models</h2>
+ </div><p>##Filtering Models</p>
<p>You can use kb.CollectionObservables to filter both ViewModels or Models (using the &#39;models_only&#39; option) using the filters constructor option. Filters can be individual ids (observable or simple) or arrays of ids, functions, or arrays of functions.</p>
<div class="row-fluid">
@@ -167,44 +167,44 @@ <h2 id="sorting-models">Sorting Models</h2>
</ul>
<div class="tab-content">
<div id="kbco_filtering_view" class="tab-pane active">
- <pre>&lt;div id='kbco_filtering' &gt;
+ <pre>&lt;div id=&#39;kbco_filtering&#39; &gt;
&lt;legend&gt;Filter Name
&lt;select data-bind=&quot;options: available_names, selectedOptions: filtered_names&quot;&gt;&lt;/select&gt;
&lt;/legend&gt;
&lt;div data-bind=&quot;foreach: people&quot;&gt;
- &lt;div class='row-fluid'&gt;
- &lt;div class='span5'&gt;
+ &lt;div class=&#39;row-fluid&#39;&gt;
+ &lt;div class=&#39;span5&#39;&gt;
&lt;span&gt;First: &lt;/span&gt;
- &lt;input class='input-small' data-bind=&quot;value: first, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small&#39; data-bind=&quot;value: first, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/div&gt;
- &lt;div class='offset1 span5'&gt;
+ &lt;div class=&#39;offset1 span5&#39;&gt;
&lt;span&gt;Last: &lt;/span&gt;
- &lt;input class='input-small' data-bind=&quot;value: last, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small&#39; data-bind=&quot;value: last, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div id="kbco_filtering_view_model" class="tab-pane">
- <pre data-for="cs">people = new Backbone.Collection([{first: 'Jeremy', last: 'Ashkenas'}, {first: 'Steven', last: 'Sanderson'}, {first: 'Kevin', last: 'Malakoff'}])
-filtered_names = ko.observableArray(['Kevin'])
+ <pre data-for="cs">people = new Backbone.Collection([{first: &#39;Jeremy&#39;, last: &#39;Ashkenas&#39;}, {first: &#39;Steven&#39;, last: &#39;Sanderson&#39;}, {first: &#39;Kevin&#39;, last: &#39;Malakoff&#39;}])
+filtered_names = ko.observableArray([&#39;Kevin&#39;])
view_model =
filtered_names: filtered_names
- available_names: ko.observableArray(people.map((model) -&gt; return model.get('first')))
- people: kb.collectionObservable(people, {filters: (model) -&gt; return model.get('first') is filtered_names()[0]})
+ available_names: ko.observableArray(people.map((model) -&gt; return model.get(&#39;first&#39;)))
+ people: kb.collectionObservable(people, {filters: (model) -&gt; return model.get(&#39;first&#39;) is filtered_names()[0]})
-ko.applyBindings(view_model, $('#kbco_filtering')[0])</pre>
- <pre data-for="js">var people = new Backbone.Collection([{first: 'Jeremy', last: 'Ashkenas'}, {first: 'Steven', last: 'Sanderson'}, {first: 'Kevin', last: 'Malakoff'}]);
-var filtered_names = ko.observableArray(['Kevin']);
+ko.applyBindings(view_model, $(&#39;#kbco_filtering&#39;)[0])</pre>
+ <pre data-for="js">var people = new Backbone.Collection([{first: &#39;Jeremy&#39;, last: &#39;Ashkenas&#39;}, {first: &#39;Steven&#39;, last: &#39;Sanderson&#39;}, {first: &#39;Kevin&#39;, last: &#39;Malakoff&#39;}]);
+var filtered_names = ko.observableArray([&#39;Kevin&#39;]);
var view_model = {
filtered_names: filtered_names,
- available_names: ko.observableArray(people.map(function(model) { return model.get('first'); })),
- people: kb.collectionObservable(people, {filters: function(model) { return model.get('first') === filtered_names()[0]; } })
+ available_names: ko.observableArray(people.map(function(model) { return model.get(&#39;first&#39;); })),
+ people: kb.collectionObservable(people, {filters: function(model) { return model.get(&#39;first&#39;) === filtered_names()[0]; } })
};
-ko.applyBindings(view_model, $('#kbco_filtering')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kbco_filtering&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -230,7 +230,7 @@ <h2 id="sorting-models">Sorting Models</h2>
<script type="application/javascript" src="tutorials/kb_collection_observable/kbco_filtering_view_model_bindings.js"></script>
</div>
</div>
- </div><h2 id="html-select-statements">HTML Select Statements</h2>
+ </div><p>##HTML Select Statements</p>
<p>You can use kb.CollectionObservables to bind HTML select statements using <a href="http://knockoutjs.com/">Knockout.js selectOptions</a>.</p>
<div class="row-fluid">
@@ -241,8 +241,8 @@ <h2 id="sorting-models">Sorting Models</h2>
</ul>
<div class="tab-content">
<div id="kbco_html_select_view" class="tab-pane active">
- <pre>&lt;div id='kbco_html_select'&gt;
- &lt;select multiple=&quot;multiple&quot; data-bind=&quot;options: people, optionsText: 'name', selectedOptions: selected_people&quot;&gt;&lt;/select&gt;
+ <pre>&lt;div id=&#39;kbco_html_select&#39;&gt;
+ &lt;select multiple=&quot;multiple&quot; data-bind=&quot;options: people, optionsText: &#39;name&#39;, selectedOptions: selected_people&quot;&gt;&lt;/select&gt;
&lt;div&gt;
&lt;span&gt;Selected people: &lt;/span&gt;
&lt;!-- ko foreach: selected_people --&gt;
@@ -252,23 +252,23 @@ <h2 id="sorting-models">Sorting Models</h2>
&lt;/div&gt;</pre>
</div>
<div id="kbco_html_select_view_model" class="tab-pane">
- <pre data-for="cs">people = new Backbone.Collection([{name: 'Bob'}, {name: 'Sarah'}, {name: 'George'}])
+ <pre data-for="cs">people = new Backbone.Collection([{name: &#39;Bob&#39;}, {name: &#39;Sarah&#39;}, {name: &#39;George&#39;}])
selected_people = new Backbone.Collection()
view_model =
people: kb.collectionObservable(people)
selected_people: kb.collectionObservable(selected_people)
-ko.applyBindings(view_model, $('#kbco_html_select')[0])</pre>
- <pre data-for="js">var people = new Backbone.Collection([{name: 'Bob'}, {name: 'Sarah'}, {name: 'George'}]);
+ko.applyBindings(view_model, $(&#39;#kbco_html_select&#39;)[0])</pre>
+ <pre data-for="js">var people = new Backbone.Collection([{name: &#39;Bob&#39;}, {name: &#39;Sarah&#39;}, {name: &#39;George&#39;}]);
var selected_people = new Backbone.Collection();
var view_model = {
people: kb.collectionObservable(people),
selected_people: kb.collectionObservable(selected_people)
};
-ko.applyBindings(view_model, $('#kbco_html_select')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kbco_html_select&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -297,9 +297,9 @@ <h2 id="sorting-models">Sorting Models</h2>
</ul>
<div class="tab-content">
<div id="kbco_share_options_view" class="tab-pane active">
- <pre>&lt;div id='kbco_share_options'&gt;
+ <pre>&lt;div id=&#39;kbco_share_options&#39;&gt;
&lt;div data-bind=&quot;text: name&quot;&gt;&lt;/div&gt;
- &lt;select multiple=&quot;multiple&quot; data-bind=&quot;options: available_things, optionsText: 'name', selectedOptions: my_things&quot;&gt;&lt;/select&gt;
+ &lt;select multiple=&quot;multiple&quot; data-bind=&quot;options: available_things, optionsText: &#39;name&#39;, selectedOptions: my_things&quot;&gt;&lt;/select&gt;
&lt;p&gt;
&lt;span&gt;My Things:&lt;/span&gt;
@@ -310,27 +310,27 @@ <h2 id="sorting-models">Sorting Models</h2>
&lt;/div&gt;</pre>
</div>
<div id="kbco_share_options_view_model" class="tab-pane">
- <pre data-for="cs">chair = new Backbone.Model({name: 'chair', my_things: new Backbone.Collection()})
-things = new Backbone.Collection([{name: 'leg1'}, {name: 'leg2'}, {name: 'leg3'}])
+ <pre data-for="cs">chair = new Backbone.Model({name: &#39;chair&#39;, my_things: new Backbone.Collection()})
+things = new Backbone.Collection([{name: &#39;leg1&#39;}, {name: &#39;leg2&#39;}, {name: &#39;leg3&#39;}])
available_things = kb.collectionObservable(things)
view_model =
available_things: available_things
- name: kb.observable(chair, 'name')
- my_things: kb.collectionObservable(chair.get('my_things'), available_things.shareOptions())
+ name: kb.observable(chair, &#39;name&#39;)
+ my_things: kb.collectionObservable(chair.get(&#39;my_things&#39;), available_things.shareOptions())
-ko.applyBindings(view_model, $('#kbco_share_options')[0])</pre>
- <pre data-for="js">var chair = new Backbone.Model({name: 'chair', my_things: new Backbone.Collection()});
-var things = new Backbone.Collection([{name: 'leg1'}, {name: 'leg2'}, {name: 'leg3'}]);
+ko.applyBindings(view_model, $(&#39;#kbco_share_options&#39;)[0])</pre>
+ <pre data-for="js">var chair = new Backbone.Model({name: &#39;chair&#39;, my_things: new Backbone.Collection()});
+var things = new Backbone.Collection([{name: &#39;leg1&#39;}, {name: &#39;leg2&#39;}, {name: &#39;leg3&#39;}]);
var available_things = kb.collectionObservable(things);
var view_model = {
available_things: available_things,
- name: kb.observable(chair, 'name'),
- my_things: kb.collectionObservable(chair.get('my_things'), available_things.shareOptions())
+ name: kb.observable(chair, &#39;name&#39;),
+ my_things: kb.collectionObservable(chair.get(&#39;my_things&#39;), available_things.shareOptions())
};
-ko.applyBindings(view_model, $('#kbco_share_options')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kbco_share_options&#39;)[0]);</pre>
</div>
</div>
</div>
View
78 tutorial_kb_localized_observable.html
@@ -92,49 +92,49 @@
@current_locale = ko.observable(locale_identifier)
get: (string_id) -&gt;
- return '(no translation)' unless @translations_by_locale[@current_locale()]
- return '(no translation)' unless @translations_by_locale[@current_locale()].hasOwnProperty(string_id)
+ return &#39;(no translation)&#39; unless @translations_by_locale[@current_locale()]
+ return &#39;(no translation)&#39; unless @translations_by_locale[@current_locale()].hasOwnProperty(string_id)
return @translations_by_locale[@current_locale()][string_id]
getLocale: -&gt; return @current_locale()
setLocale: (locale_identifier) -&gt;
@current_locale(locale_identifier)
- @trigger('change', @)
+ @trigger(&#39;change&#39;, @)
_.extend(LocaleManager.prototype, Backbone.Events)
-kb.locale_manager = new LocaleManager('en-GB', {
- 'en-GB':
- body: 'I ought to localize this sentence.'
- 'fr-FR':
- body: 'J\'ai besoin de localiser cette phrase.'
+kb.locale_manager = new LocaleManager(&#39;en-GB&#39;, {
+ &#39;en-GB&#39;:
+ body: &#39;I ought to localize this sentence.&#39;
+ &#39;fr-FR&#39;:
+ body: &#39;J\&#39;ai besoin de localiser cette phrase.&#39;
})
</pre>
<pre data-for="js">var LocaleManager = function(locale_identifier, translations_by_locale) {
this.translations_by_locale = translations_by_locale;
this.current_locale = ko.observable(locale_identifier);
this.get = function(string_id) {
- if (!this.translations_by_locale[this.current_locale()]) {return '(no translation)';}
- if (!this.translations_by_locale[this.current_locale()].hasOwnProperty(string_id)) {return '(no translation)';}
+ if (!this.translations_by_locale[this.current_locale()]) {return &#39;(no translation)&#39;;}
+ if (!this.translations_by_locale[this.current_locale()].hasOwnProperty(string_id)) {return &#39;(no translation)&#39;;}
this.translations_by_locale[this.current_locale()][string_id];
};
this.getLocale = function() { return this.current_locale(); };
this.setLocale = function(locale_identifier) {
this.current_locale(locale_identifier);
- this.trigger('change', this);
+ this.trigger(&#39;change&#39;, this);
};
};
_.extend(LocaleManager.prototype, Backbone.Events);
-kb.locale_manager = new LocaleManager('en-GB', {
- 'en-GB': {
- body: 'I ought to localize this sentence.'
+kb.locale_manager = new LocaleManager(&#39;en-GB&#39;, {
+ &#39;en-GB&#39;: {
+ body: &#39;I ought to localize this sentence.&#39;
},
- 'fr-FR': {
- body: 'J\'ai besoin de localiser cette phrase.'
+ &#39;fr-FR&#39;: {
+ body: &#39;J\&#39;ai besoin de localiser cette phrase.&#39;
}
});
</pre>
@@ -159,20 +159,20 @@
return kb.utils.wrappedObservable(@)
read: (string_id) -&gt;
- return if (string_id) then kb.locale_manager.get(string_id) else ''
+ return if (string_id) then kb.locale_manager.get(string_id) else &#39;&#39;
})</pre>
<pre data-for="js">var LocalizedStringLocalizer = kb.LocalizedObservable.extend({
constructor: function(value, options, view_model) {
kb.LocalizedObservable.prototype.constructor.apply(this, arguments);
return kb.utils.wrappedObservable(this);
},
read: function(string_id) {
- return string_id ? kb.locale_manager.get(string_id) : '';
+ return string_id ? kb.locale_manager.get(string_id) : &#39;&#39;;
}
});</pre>
</div>
<div id="kblo_string_id_view" class="tab-pane">
- <pre>&lt;div id='kblo_read_only'&gt;
+ <pre>&lt;div id=&#39;kblo_read_only&#39;&gt;
&lt;p data-bind=&quot;text: main_text&quot;&gt;&lt;/p&gt;
&lt;p&gt;
@@ -183,24 +183,24 @@
&lt;/div&gt;</pre>
</div>
<div id="kblo_string_id_view_model" class="tab-pane">
- <pre data-for="cs">texts = new Backbone.Model({main_text_id: 'body'})
+ <pre data-for="cs">texts = new Backbone.Model({main_text_id: &#39;body&#39;})
view_model =
- main_text: kb.observable(texts, {key: 'main_text_id', localizer: LocalizedStringLocalizer})
+ main_text: kb.observable(texts, {key: &#39;main_text_id&#39;, localizer: LocalizedStringLocalizer})
toggleLocale: -&gt;
- kb.locale_manager.setLocale(if kb.locale_manager.getLocale() is 'en-GB' then 'fr-FR' else 'en-GB')
+ kb.locale_manager.setLocale(if kb.locale_manager.getLocale() is &#39;en-GB&#39; then &#39;fr-FR&#39; else &#39;en-GB&#39;)
-ko.applyBindings(view_model, $('#kblo_read_only')[0])</pre>
- <pre data-for="js">var texts = new Backbone.Model({main_text_id: 'body'});
+ko.applyBindings(view_model, $(&#39;#kblo_read_only&#39;)[0])</pre>
+ <pre data-for="js">var texts = new Backbone.Model({main_text_id: &#39;body&#39;});
view_model = {
- main_text: kb.observable(texts, {key: 'main_text_id', localizer: LocalizedStringLocalizer}),
+ main_text: kb.observable(texts, {key: &#39;main_text_id&#39;, localizer: LocalizedStringLocalizer}),
toggleLocale: function() {
- return kb.locale_manager.setLocale(kb.locale_manager.getLocale() === 'en-GB' ? 'fr-FR' : 'en-GB');
+ return kb.locale_manager.setLocale(kb.locale_manager.getLocale() === &#39;en-GB&#39; ? &#39;fr-FR&#39; : &#39;en-GB&#39;);
}
};
-ko.applyBindings(view_model, $('#kblo_read_only')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kblo_read_only&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -239,11 +239,11 @@ <h3 id="localized_input">Localized Input</h3>
return kb.utils.wrappedObservable(@)
read: (value) -&gt;
- return Globalize.format(value, 'dd MMMM yyyy', kb.locale_manager.getLocale())
+ return Globalize.format(value, &#39;dd MMMM yyyy&#39;, kb.locale_manager.getLocale())
write: (localized_string, value) -&gt;
# reset if invalid
- new_value = Globalize.parseDate(localized_string, 'dd MMMM yyyy', kb.locale_manager.getLocale())
+ new_value = Globalize.parseDate(localized_string, &#39;dd MMMM yyyy&#39;, kb.locale_manager.getLocale())
if not (new_value and _.isDate(new_value))
return kb.utils.wrappedObservable(this).resetToCurrent()
@@ -255,11 +255,11 @@ <h3 id="localized_input">Localized Input</h3>
return kb.utils.wrappedObservable(this);
},
read: function(value) {
- return Globalize.format(value, 'dd MMMM yyyy', kb.locale_manager.getLocale());
+ return Globalize.format(value, &#39;dd MMMM yyyy&#39;, kb.locale_manager.getLocale());
},
write: function(localized_string, value) {
// reset if invalid
- var new_value = Globalize.parseDate(localized_string, 'dd MMMM yyyy', kb.locale_manager.getLocale());
+ var new_value = Globalize.parseDate(localized_string, &#39;dd MMMM yyyy&#39;, kb.locale_manager.getLocale());
if (!(new_value &amp;&amp; _.isDate(new_value))) {
return kb.utils.wrappedObservable(this).resetToCurrent();
}
@@ -268,8 +268,8 @@ <h3 id="localized_input">Localized Input</h3>
});</pre>
</div>
<div id="kblo_localized_input_view" class="tab-pane">
- <pre>&lt;div id='kblo_read_write'&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: date, valueUpdate: 'keyup'&quot;/&gt;
+ <pre>&lt;div id=&#39;kblo_read_write&#39;&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: date, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;p&gt;
&lt;span&gt;Current Locale: &lt;span&gt;
@@ -282,21 +282,21 @@ <h3 id="localized_input">Localized Input</h3>
<pre data-for="cs">model = new Backbone.Model({date: new Date()})
view_model =
- date: kb.observable(model, {key: 'date', localizer: LongDateLocalizer})
+ date: kb.observable(model, {key: &#39;date&#39;, localizer: LongDateLocalizer})
toggleLocale: -&gt;
- kb.locale_manager.setLocale(if kb.locale_manager.getLocale() is 'en-GB' then 'fr-FR' else 'en-GB')
+ kb.locale_manager.setLocale(if kb.locale_manager.getLocale() is &#39;en-GB&#39; then &#39;fr-FR&#39; else &#39;en-GB&#39;)
-ko.applyBindings(view_model, $('#kblo_read_write')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#kblo_read_write&#39;)[0])</pre>
<pre data-for="js">var model = new Backbone.Model({date: new Date()});
view_model = {
- date: kb.observable(model, {key: 'date', localizer: LongDateLocalizer}),
+ date: kb.observable(model, {key: &#39;date&#39;, localizer: LongDateLocalizer}),
toggleLocale: function() {
- return kb.locale_manager.setLocale(kb.locale_manager.getLocale() === 'en-GB' ? 'fr-FR' : 'en-GB');
+ return kb.locale_manager.setLocale(kb.locale_manager.getLocale() === &#39;en-GB&#39; ? &#39;fr-FR&#39; : &#39;en-GB&#39;);
}
};
-ko.applyBindings(view_model, $('#kblo_read_write')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kblo_read_write&#39;)[0]);</pre>
</div>
</div>
</div>
View
54 tutorial_kb_observable.html
@@ -80,10 +80,10 @@
<div class="container">
<header class="page">
</header>
- <content class="page"><h1 id="tutorial-kb-observable">Tutorial: kb.Observable</h1>
+ <content class="page"><p>#Tutorial: kb.Observable</p>
<p><a href="index.html">Knockback.js</a> provides ways to customize a kb.Observable when it is created. This tutorial provides working examples of using these options.</p>
-<h2 id="create-options-read-function-write-function-value-">Create Options: {read: function(), write: function(value)}</h2>
-<p>Instead of performing a simple Backbone.Model get or set to synchronize with a kb.Observable, you can provide a custom read or write method like for a ko.observable.</p>
+<p>##Create Options: {read: function(), write: function(value)}
+Instead of performing a simple Backbone.Model get or set to synchronize with a kb.Observable, you can provide a custom read or write method like for a ko.observable.</p>
<p><strong>Note</strong>: just like in Knockout.js, if you require access to the owning view model, it provided as &#39;this&#39; in read and write methods if you provide it as a parameter to the kb.observable&#39;s create method: (model, options, owning_view_model)</p>
<div class="row-fluid">
@@ -94,40 +94,40 @@ <h2 id="create-options-read-function-write-function-value-">Create Options: {rea
</ul>
<div class="tab-content">
<div id="kboo_read_write_view" class="tab-pane active">
- <pre>&lt;div id='kboo_read_write'&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: formatted_number, valueUpdate: 'keyup'&quot;/&gt;
+ <pre>&lt;div id=&#39;kboo_read_write&#39;&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: formatted_number, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;label data-bind=&quot;text: number&quot;&gt;&lt;/label&gt;
&lt;/div&gt;</pre>
</div>
<div id="kboo_read_write_view_model" class="tab-pane">
<pre data-for="cs">model = new Backbone.Model({number: 33})
ViewModel = (model) -&gt;
- @number = kb.observable(model, 'number')
+ @number = kb.observable(model, &#39;number&#39;)
@formatted_number = kb.observable(model, {
- key:'number'
+ key:&#39;number&#39;
read: -&gt; return &quot;#: #{@number()}&quot;
write: (value) -&gt; @number(value.substring(3))
- }, @)
+ }, {}, @)
return
view_model = new ViewModel(model)
-ko.applyBindings(view_model, $('#kboo_read_write')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#kboo_read_write&#39;)[0])</pre>
<pre data-for="js">var model = new Backbone.Model({number: 33});
var ViewModel = function(model) {
- this.number = kb.observable(model, 'number');
+ this.number = kb.observable(model, &#39;number&#39;);
this.formatted_number = kb.observable(model, {
- key: 'number',
+ key: &#39;number&#39;,
read: function() { return &quot;#: &quot; + (this.number()); },
write: function(value) { return this.number(value.substring(3)); }
- }, this);
+ }, {}, this);
};
var view_model = new ViewModel(model);
-ko.applyBindings(view_model, $('#kboo_read_write')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kboo_read_write&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -140,19 +140,19 @@ <h2 id="create-options-read-function-write-function-value-">Create Options: {rea
<script type="application/javascript" src="tutorials/kb_observable/kboo_read_write_view_model_bindings.js"></script>
</div>
</div>
- </div><h2 id="create-options-localizer-constructor-value-">Create Options: {localizer: constructor(value)}</h2>
+ </div><p>##Create Options: {localizer: constructor(value)}</p>
<p>Instead of a read and/or write option, you can provide a kb.LocalizedObservable derived class for custom localized of an attribute. Please see the <a href="tutorial_kb_localized_observable.html#localized_input">kb.LocalizedObservable tutorial</a> an explanation of the following:</p>
-<h3 id="viewmodel-and-bindings-">ViewModel and Bindings:</h3>
+<p>###ViewModel and Bindings:</p>
<pre data-for="cs">model = new Backbone.Model({date: new Date()})
view_model =
- date: kb.observable(model, {key: 'date', localizer: LongDateLocalizer})</pre>
+ date: kb.observable(model, {key: &#39;date&#39;, localizer: LongDateLocalizer})</pre>
<pre data-for="js"> var model = new Backbone.Model({date: new Date()});
var view_model = {
- date: kb.observable(model, {key: 'date', localizer: LongDateLocalizer})
- };</pre><h2 id="create-options-default-value-or-observable-">Create Options: {default: value or observable}</h2>
+ date: kb.observable(model, {key: &#39;date&#39;, localizer: LongDateLocalizer})
+ };</pre><p>##Create Options: {default: value or observable}</p>
<p>You can pass a default function or parameter to provide a value when there is no value available.</p>
<div class="row-fluid">
@@ -163,32 +163,32 @@ <h3 id="viewmodel-and-bindings-">ViewModel and Bindings:</h3>
</ul>
<div class="tab-content">
<div id="kboo_default_view" class="tab-pane active">
- <pre>&lt;div id='kboo_default'&gt;
- &lt;p&gt;Name: &lt;input class='input-small pull-right' data-bind=&quot;value: name, valueUpdate: 'keyup'&quot;/&gt;&lt;/p&gt;
+ <pre>&lt;div id=&#39;kboo_default&#39;&gt;
+ &lt;p&gt;Name: &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: name, valueUpdate: &#39;keyup&#39;&quot;/&gt;&lt;/p&gt;
&lt;p&gt;Name with default: &lt;span data-bind=&quot;text: name_with_default&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;</pre>
</div>
<div id="kboo_default_view_model" class="tab-pane">
<pre data-for="cs">model = new Backbone.Model({})
ViewModel = (model) -&gt;
- @name = kb.observable(model, 'name')
- @name_with_default = kb.observable(model, {key: 'name', default: '(no name)'})
+ @name = kb.observable(model, &#39;name&#39;)
+ @name_with_default = kb.observable(model, {key: &#39;name&#39;, default: &#39;(no name)&#39;})
return
view_model = new ViewModel(model)
-ko.applyBindings(view_model, $('#kboo_default_view_model')[0])</pre>
+ko.applyBindings(view_model, $(&#39;#kboo_default_view_model&#39;)[0])</pre>
<pre data-for="js">var model = new Backbone.Model({});
var ViewModel = function(model) {
- this.name = kb.observable(model, 'name');
- this.name_with_default = kb.observable(model, {key: 'name', &quot;default&quot;: '(no name)'});
+ this.name = kb.observable(model, &#39;name&#39;);
+ this.name_with_default = kb.observable(model, {key: &#39;name&#39;, &quot;default&quot;: &#39;(no name)&#39;});
};
var view_model = new ViewModel(model);
-ko.applyBindings(view_model, $('#kboo_default')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kboo_default&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -201,7 +201,7 @@ <h3 id="viewmodel-and-bindings-">ViewModel and Bindings:</h3>
<script type="application/javascript" src="tutorials/kb_observable/kboo_default_view_model_bindings.js"></script>
</div>
</div>
- </div><h2 id="dynamic-attribute-types">Dynamic Attribute Types</h2>
+ </div><p>##Dynamic Attribute Types</p>
<p>Since Knockback.js version 0.16.0, a kb.Observable can be created using the correct type before the attribute is loaded using the <a href="doc/class/kb/ViewModel.html#constructor-dynamic">factories options</a> and change types when the attribute value changes.</p>
<pre data-for="cs">model = new Backbone.Model({reused: null})
View
36 tutorial_kb_view_model.html
@@ -80,7 +80,7 @@
<div class="container">
<header class="page">
</header>
- <content class="page"><h1 id="tutorial-kb-viewmodel">Tutorial: kb.ViewModel</h1>
+ <content class="page"><p>#Tutorial: kb.ViewModel</p>
<p><a href="index.html">Knockback.js</a> has a helper called <a href="doc/class/kb/ViewModel.html">kb.ViewModel</a> to automatically generate observables for each attribute. Most likely you will use the <a href="doc/class/kb/ViewModel.html#extend-static">kb.viewModel(model) factory method</a> to create a kb.ViewModel.</p>
<p>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 them using <a href="doc/class/kb/ViewModel.html#constructor-dynamic">constructor options</a> like &#39;keys&#39; or &#39;excludes&#39; to limit the attributes which have kb.Observables for them or &#39;requires&#39; to ensure that observables are created consistently irregardless of the Model.</p>
<p>In this case, Knockback will skip creating an observable for the &#39;id&#39; attribute:</p>
@@ -92,7 +92,7 @@
<pre data-for="cs">view_model = kb.viewModel(new Backbone.Model({name: 'Bob'}), {requires: ['name', 'date']})
</pre>
<pre data-for="js">var view_model = kb.viewModel(new Backbone.Model({name: 'Bob'}), {requires: ['name', 'date']});
-</pre><h2 id="attribute-type-backbone-model">Attribute Type: Backbone.Model</h2>
+</pre><p>##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 &#39;attribute_name()&#39; syntax rather than as a simple property such as &#39;friend().name&#39; below.</p>
<div class="row-fluid">
@@ -103,14 +103,14 @@
</ul>
<div class="tab-content">
<div id="kbvm_bb_model_view" class="tab-pane active">
- <pre>&lt;div id='kbvm_bb_model'&gt;
+ <pre>&lt;div id=&#39;kbvm_bb_model&#39;&gt;
&lt;p&gt;
&lt;span&gt;First Person: &lt;/span&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: name, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: name, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;span&gt;Second Person: &lt;/span&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: friend().name, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: friend().name, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/p&gt;
&lt;p&gt;
@@ -123,16 +123,16 @@
&lt;/div&gt;</pre>
</div>
<div id="kbvm_bb_model_view_model" class="tab-pane">
- <pre data-for="cs">bob = new Backbone.Model({name: 'Bob', friend: new Backbone.Model({name: 'Fred'})})
+ <pre data-for="cs">bob = new Backbone.Model({name: &#39;Bob&#39;, friend: new Backbone.Model({name: &#39;Fred&#39;})})
view_model = kb.viewModel(bob)
-ko.applyBindings(view_model, $('#kbvm_bb_model')[0])</pre>
- <pre data-for="js">var bob = new Backbone.Model({name: 'Bob', friend: new Backbone.Model({name: 'Fred'})});
+ko.applyBindings(view_model, $(&#39;#kbvm_bb_model&#39;)[0])</pre>
+ <pre data-for="js">var bob = new Backbone.Model({name: &#39;Bob&#39;, friend: new Backbone.Model({name: &#39;Fred&#39;})});
var view_model = kb.viewModel(bob);
-ko.applyBindings(view_model, $('#kbvm_bb_model')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kbvm_bb_model&#39;)[0]);</pre>
</div>
</div>
</div>
@@ -159,7 +159,7 @@
<script type="application/javascript" src="tutorials/kb_view_model/kbvm_bb_model_view_model_bindings.js"></script>
</div>
</div>
- </div><h2 id="attribute-type-backbone-collection">Attribute Type: Backbone.Collection</h2>
+ </div><p>##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&#39;s models. Because the collection can change behind the scenes, you must access the collection observable using the &#39;attribute_name()&#39; syntax rather than as a simple property.</p>
<div class="row-fluid">
@@ -170,18 +170,18 @@
</ul>
<div class="tab-content">
<div id="kbvm_bb_collection_view" class="tab-pane active">
- <pre>&lt;div id='kbvm_bb_collection'&gt;
+ <pre>&lt;div id=&#39;kbvm_bb_collection&#39;&gt;
&lt;p&gt;
&lt;span&gt;First Person: &lt;/span&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: name, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: name, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;span&gt;Second Person: &lt;/span&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: friends()[0].name, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: friends()[0].name, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;span&gt;Third Person: &lt;/span&gt;
- &lt;input class='input-small pull-right' data-bind=&quot;value: friends()[1].name, valueUpdate: 'keyup'&quot;/&gt;
+ &lt;input class=&#39;input-small pull-right&#39; data-bind=&quot;value: friends()[1].name, valueUpdate: &#39;keyup&#39;&quot;/&gt;
&lt;/p&gt;
&lt;p&gt;
@@ -196,16 +196,16 @@
&lt;/div&gt;</pre>
</div>
<div id="kbvm_bb_collection_view_model" class="tab-pane">
- <pre data-for="cs">bob = new Backbone.Model({name: 'Bob', friends: new Backbone.Collection([new Backbone.Model({name: 'Fred'}), new Backbone.Model({name: 'John'})])})
+ <pre data-for="cs">bob = new Backbone.Model({name: &#39;Bob&#39;, friends: new Backbone.Collection([new Backbone.Model({name: &#39;Fred&#39;}), new Backbone.Model({name: &#39;John&#39;})])})
view_model = kb.viewModel(bob)
-ko.applyBindings(view_model, $('#kbvm_bb_collection')[0])</pre>
- <pre data-for="js">var bob = new Backbone.Model({name: 'Bob', friends: new Backbone.Collection([new Backbone.Model({name: 'Fred'}), new Backbone.Model({name: 'John'})])});
+ko.applyBindings(view_model, $(&#39;#kbvm_bb_collection&#39;)[0])</pre>
+ <pre data-for="js">var bob = new Backbone.Model({name: &#39;Bob&#39;, friends: new Backbone.Collection([new Backbone.Model({name: &#39;Fred&#39;}), new Backbone.Model({name: &#39;John&#39;})])});
var view_model = kb.viewModel(bob);
-ko.applyBindings(view_model, $('#kbvm_bb_collection')[0]);</pre>
+ko.applyBindings(view_model, $(&#39;#kbvm_bb_collection&#39;)[0]);</pre>
</div>
</div>
</div>
View
164 tutorial_knockback_inspector.html
@@ -101,7 +101,7 @@
<p>Here is some pseudo-HTML for the model node:</p>
<pre>&lt;li data-bind=&quot;css: {opened: opened, closed: !opened()}&quot;&gt;
&lt;div data-bind=&quot;click: function(){ opened(!opened()) }&quot;&gt;
- &lt;span data-bind=&quot;text: (opened() ? '- ' : '+ ' )&quot;&gt;&lt;/span&gt;
+ &lt;span data-bind=&quot;text: (opened() ? &#39;- &#39; : &#39;+ &#39; )&quot;&gt;&lt;/span&gt;
&lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
@@ -110,7 +110,7 @@
&lt;!-- IF SIMPLE --&gt;
&lt;fieldset&gt;
&lt;label&gt;&lt;/label&gt;
- &lt;input type='text'&gt;
+ &lt;input type=&#39;text&#39;&gt;
&lt;/fieldset&gt;
&lt;!-- ELSE IF MODEL --&gt;
@@ -133,7 +133,7 @@
<p>Here is some pseudo-HTML for the collection node:</p>
<pre>&lt;li data-bind=&quot;css: {opened: opened, closed: !opened()}&quot;&gt;
&lt;div data-bind=&quot;click: function(){ opened(!opened()) }&quot;&gt;
- &lt;span data-bind=&quot;text: (opened() ? '- ' : '+ ' )&quot;&gt;&lt;/span&gt;
+ &lt;span data-bind=&quot;text: (opened() ? &#39;- &#39; : &#39;+ &#39; )&quot;&gt;&lt;/span&gt;
&lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
@@ -174,7 +174,7 @@
<p>Updating the 'kbi_model_node' pseudo HTML:</p>
<pre>&lt;li data-bind=&quot;css: {opened: opened, closed: !opened()}&quot;&gt;
&lt;div data-bind=&quot;click: function(){ opened(!opened()) }&quot;&gt;
- &lt;span data-bind=&quot;text: (opened() ? '- ' : '+ ' )&quot;&gt;&lt;/span&gt;
+ &lt;span data-bind=&quot;text: (opened() ? &#39;- &#39; : &#39;+ &#39; )&quot;&gt;&lt;/span&gt;
&lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
@@ -184,28 +184,28 @@
&lt;!-- IF SIMPLE --&gt;
&lt;fieldset&gt;
&lt;label&gt;&lt;/label&gt;
- &lt;input type='text'&gt;
+ &lt;input type=&#39;text&#39;&gt;
&lt;/fieldset&gt;
&lt;!-- ELSE IF MODEL --&gt;
- &lt;ul data-bind=&quot;template: {name: 'kbi_model_node', data: kbi.nvm(attribute_name, false, node)}&quot;&gt;&lt;/ul&gt;
+ &lt;ul data-bind=&quot;template: {name: &#39;kbi_model_node&#39;, data: kbi.nvm(attribute_name, false, node)}&quot;&gt;&lt;/ul&gt;
&lt;!-- ELSE IF COLLECTION --&gt;
- &lt;ul data-bind=&quot;template: {name: 'kbi_collection_node', data: kbi.nvm(attribute_name+'[]', true, node)}&quot;&gt;&lt;/ul&gt;
+ &lt;ul data-bind=&quot;template: {name: &#39;kbi_collection_node&#39;, data: kbi.nvm(attribute_name+&#39;[]&#39;, true, node)}&quot;&gt;&lt;/ul&gt;
&lt;!-- /ko --&gt;
&lt;/li&gt;
</pre>
<p>Updating the 'kbi_collection_node' pseudo HTML:</p>
<pre>&lt;li data-bind=&quot;css: {opened: opened, closed: !opened()}&quot;&gt;
&lt;div data-bind=&quot;click: function(){ opened(!opened()) }&quot;&gt;
- &lt;span data-bind=&quot;text: (opened() ? '- ' : '+ ' )&quot;&gt;&lt;/span&gt;
+ &lt;span data-bind=&quot;text: (opened() ? &#39;- &#39; : &#39;+ &#39; )&quot;&gt;&lt;/span&gt;
&lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;!-- ko if: opened --&gt;
&lt;!-- FOREACH MODEL --&gt;
- &lt;ul data-bind=&quot;template: {name: 'kbi_model_node', data: kbi.nvm('['+$index()+']', false, node)}&quot;&gt;&lt;/ul&gt;
+ &lt;ul data-bind=&quot;template: {name: &#39;kbi_model_node&#39;, data: kbi.nvm(&#39;[&#39;+$index()+&#39;]&#39;, false, node)}&quot;&gt;&lt;/ul&gt;
&lt;!-- /ko --&gt;
&lt;/li&gt;
</pre>
@@ -258,7 +258,7 @@
<p><span>Updating the pseudo-HTML for the model node:</span>
<pre>&lt;li data-bind=&quot;css: {opened: opened, closed: !opened()}&quot;&gt;
&lt;div data-bind=&quot;click: function(){ opened(!opened()) }&quot;&gt;
- &lt;span data-bind=&quot;text: (opened() ? '- ' : '+ ' )&quot;&gt;&lt;/span&gt;
+ &lt;span data-bind=&quot;text: (opened() ? &#39;- &#39; : &#39;+ &#39; )&quot;&gt;&lt;/span&gt;
&lt;span data-bind=&quot;text: name&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
@@ -268,16 +268,16 @@
&lt;!-- ko if: (kb.utils.valueType($parent.node[$data]) == kb.TYPE_SIMPLE) --&gt;
&lt;fieldset&gt;
&lt;label data-bind=&quot;text: $data&quot;&gt; &lt;/label&gt;
- &lt;input type='text' data-bind=&quot;value: $parent.node[$data]&quot;&gt;
+ &lt;input type=&#39;text&#39; data-bind=&quot;value: $parent.node[$data]&quot;&gt;
&lt;/fieldset&gt;
&lt;!-- /ko --&gt;
&lt;!-- ko if: (kb.utils.valueType($parent.node[$data]) == kb.TYPE_MODEL) --&gt;
- &lt;ul data-bind=&quot;template: {name: 'kbi_model_node', data: kbi.nvm($data, false, $parent.node[$data])}&quot;&gt;&lt;/ul&gt;
+ &lt;ul data-bind=&quot;template: {name: &#39;kbi_model_node&#39;, data: kbi.nvm($data, false, $parent.node[$data])}&quot;&gt;&lt;/ul&gt;
&lt;!-- /ko --&gt;
&lt;!-- ko if: (kb.utils.valueType($parent.node[$data]) == kb.TYPE_COLLECTION) --&gt;
- &lt;ul data-bind=&quot;template: {name: 'kbi_collection_node', data: kbi.nvm($data+'[]', true, $parent.node[$data])}&quot;&gt;&lt;/ul&gt;
+ &lt;ul data-bind=&quot;template: {name: &#39;kbi_collection_node&#39;, data: kbi.nvm($data+&#39;[]&#39;, true, $parent.node[$data])}&quot;&gt;&lt;/ul&gt;
&lt;!-- /ko --&gt;
&lt;!-- /ko --&gt;
@@ -337,24 +337,24 @@
- vendor</pre>
<pre>&lt;!doctype html&gt;
&lt;head&gt;
- &lt;meta charset='utf-8'&gt;
- &lt;meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'&gt;
+ &lt;meta charset=&#39;utf-8&#39;&gt;
+ &lt;meta http-equiv=&#39;X-UA-Compatible&#39; content=&#39;IE=edge,chrome=1&#39;&gt;
&lt;title&gt;Knockback Inspector&lt;/title&gt;
&lt;!-- DEPENDENCIES --&gt;
- &lt;script src='vendor/jquery-1.9.1.js'&gt;&lt;/script&gt;
- &lt;script src='vendor/knockback-core-stack-1.0.0.js'&gt;&lt;/script&gt;
- &lt;script src='vendor/backbone-relational-0.8.8.js'&gt;&lt;/script&gt;
+ &lt;script src=&#39;vendor/jquery-1.9.1.js&#39;&gt;&lt;/script&gt;
+ &lt;script src=&#39;vendor/knockback-core-stack-1.0.0.js&#39;&gt;&lt;/script&gt;
+ &lt;script src=&#39;vendor/backbone-relational-0.8.8.js&#39;&gt;&lt;/script&gt;
&lt;!-- APPLICATION STYLING --&gt;
- &lt;style type='text/css'&gt;
+ &lt;style type=&#39;text/css&#39;&gt;
#content {width: 800px; margin: 0 auto; background-color: #F5E0FF; border-radius: 5px;}
h1 {text-align: center; font-size: 2em; color: #fff; background-color: #CC66FF; border-radius: 5px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
- &lt;div id='content'&gt;
+ &lt;div id=&#39;content&#39;&gt;
&lt;h1&gt;Knockback Inspector&lt;/h1&gt;
&lt;/div&gt;
&lt;/body&gt;
@@ -424,33 +424,33 @@
<p>Finally, let's update the index.html file to include /javjs/kbi_core.js, to display the version number using Knockback.js, and to add some styling:</p>
<pre>&lt;!doctype html&gt;
&lt;head&gt;
- &lt;meta charset='utf-8'&gt;
- &lt;meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'&gt;
- &lt;title class='inspector_title' data-bind=&quot;text: title&quot;&gt;&lt;/title&gt;
+ &lt;meta charset=&#39;utf-8&#39;&gt;
+ &lt;meta http-equiv=&#39;X-UA-Compatible&#39; content=&#39;IE=edge,chrome=1&#39;&gt;
+ &lt;title class=&#39;inspector_title&#39; data-bind=&quot;text: title&quot;&gt;&lt;/title&gt;
&lt;!-- DEPENDENCIES --&gt;
- &lt;script src='vendor/jquery-1.9.1.js'