-
Notifications
You must be signed in to change notification settings - Fork 79
/
getting_started_introduction.html
125 lines (123 loc) · 8.99 KB
/
getting_started_introduction.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started Overview</title>
<link rel="stylesheet" href="./vendor/css/normalize.css">
<link rel="stylesheet" href="./vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./vendor/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="./vendor/google-code-prettify/prettify.css">
<link rel="stylesheet" href="./css/layout.css">
<link rel="stylesheet" href="./css/layout_components.css">
<link rel="icon" type="image/x-icon" href="./img/favicon.ico">
<script type="application/javascript" src="./vendor/js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/tutorial.css">
<script type="application/javascript" src="vendor/globalize/globalize.js"></script>
<script type="application/javascript" src="vendor/globalize/globalize.culture.en-GB.js"></script>
<script type="application/javascript" src="vendor/globalize/globalize.culture.fr-FR.js"></script>
<script type="application/javascript" src="vendor/js/knockback-full-stack-1.0.0.js"></script>
<script type="application/javascript" src="./vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="./vendor/google-code-prettify/prettify.js"></script>
<script type="application/javascript" src="./js/stylecode.js"></script>
<script type="application/javascript" src="./js/interface.js"></script>
</head>
<body>
<div class="page navbar">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="https://github.com/kmalakoff/knockback" class="brand kb">Knockback.js</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="doc/index.html">API</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Getting Started<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="getting_started_introduction.html">Overview</a><a href="getting_started_dependent_library_basics.html">Dependent Library Basics</a><a href="getting_started_knockback_basics.html">Knockback Basics</a><a href="getting_started_views_view_models_models.html">Models, Views, and ViewModels</a><a href="getting_started_memory_lifecycle_management.html">Memory and Lifecycle Management</a><a href="getting_started_knockback_important_details.html">Knockback Important Details</a>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Components<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="components_backbone_relational.html">Backbone Relational</a><a href="components_backbone_modelref.html">Backbone ModelRef</a><a href="components_knockback_inspector.html">Knockback Inspector</a><a href="components_knockback_navigators.html">Knockback Navigators</a>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Applications<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="app_knockback_reference.html">Knockback Reference App</a><a href="app_todos.html">Todos App</a>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tutorials<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="tutorials_introduction.html">Introduction</a><a href="tutorial_kb_observable.html">kb.Observable</a><a href="tutorial_kb_view_model.html">kb.ViewModel</a><a href="tutorial_kb_collection_observable.html">kb.CollectionObservable</a><a href="tutorial_nested_models.html">Nested Models</a><a href="tutorial_relational_models.html">Relational Models</a><a href="tutorial_kb_localized_observable.html">kb.LocalizedObservable</a><a href="tutorial_locale_manager.html">Custom Locale Manager</a><a href="tutorial_inject.html">ViewModel Injection</a><a href="tutorial_knockback_inspector.html">Knockback Inspector (Advanced)</a>
</li>
</ul>
</li>
<li><a href="https://github.com/kmalakoff/knockback/blob/master/RELEASE_NOTES.md">Release Notes</a></li>
</ul>
<div id="script_language">
<div class="separator">
<div class="selection codestyle">
<div class="option">
<input id="cs-cs" type="radio" name="codestyle" value="cs" class="auto"/>
<label for="cs-cs">CS</label>
</div>
<div class="option">
<input id="cs-js" type="radio" name="codestyle" value="js"/>
<label for="cs-js">JS</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<header class="page">
</header>
<content class="page">
<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>
<p>#Tidbits</p>
<ul>
<li><p>'kb' and 'Knockback' can be used interchangeably</p>
</li>
<li><p>Knockback.js uses the following coding conventions: ClassName, functionName, property_name, 'constant string', "dynamic string", CONSTANT_NAME</p>
</li>
</ul>
<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><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>
<li><a href="http://knockoutjs.com/examples/">Live examples of Knockout.js</a></li>
<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM08">Excellent video walking through Knockout.js</a>:</li>
<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>
<p>#Topics</p>
<p>You can find the various 'Getting Started' 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>
<li><a href="getting_started_knockback_basics.html">Knockback Basics</a>: shows you how to bind a Backbone.Model and Backbone.Collection to DOM elements</li>
<li><a href="getting_started_knockback_important_details.html">Knockback Important Details</a>: an explanation of a few additional things you should know before diving in</li>
<li><a href="getting_started_views_view_models_models.html">Views ViewModels Models</a>: a discussion on the relationship between Views/ViewModels/Models and whether you should you Backbone.Views (or not!)</li>
</ul>
</section>
</content>
<footer class="page">
</footer>
</div>
</body>
</html>