docs/src.html
<!DOCTYPE html>
<html>
<head>
<title>Browser Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page">
<a class="source" href="src.html">
src.js
</a>
<a class="source" href="index.html">
index.js
</a>
<a class="source" href="flux.html">
flux.js
</a>
<a class="source" href="mvc.html">
mvc.js
</a>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
<h1 id="browser-example">Browser Example</h1>
<p>This is a very simple example of a web app built with Kronicle6 for use in browsers</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> Kronicle = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/Kronicle.js"</span>).Kronicle;
<span class="hljs-keyword">var</span> DataSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/lib/DataSource.js"</span>).DataSource;
<span class="hljs-keyword">var</span> DataSources = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/lib/DataSources.js"</span>).DataSources;
<span class="hljs-keyword">var</span> ArrayDataSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/lib/ArrayDataSource.js"</span>).ArrayDataSource;
<span class="hljs-keyword">var</span> View = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/lib/View.js"</span>).View;
<span class="hljs-keyword">var</span> Controller = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/lib/Controller.js"</span>).Controller;
<span class="hljs-keyword">var</span> Component = <span class="hljs-built_in">require</span>(<span class="hljs-string">"../../build/lib/Component.js"</span>).Component;</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p>Create a DataSources object that contains an ArrayDataSource and push a test item on to it.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> dataSources = <span class="hljs-keyword">new</span> DataSources([<span class="hljs-keyword">new</span> DataSource({ source: <span class="hljs-keyword">new</span> ArrayDataSource(), name: <span class="hljs-string">"ArrayDataSource"</span> })]);
dataSources.sources.ArrayDataSource.create(<span class="hljs-string">'Kronicle'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'test created'</span>);
});</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Create Hello World Controller</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> helloCtrl = <span class="hljs-keyword">new</span> Controller({
name: <span class="hljs-string">'HelloWorld'</span>,</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<p>View for controller, also called HelloWorld, will be renamed internally to HelloWorldView</p>
</div>
<div class="content"><div class='highlight'><pre> view: <span class="hljs-keyword">new</span> View({
name: <span class="hljs-string">'HelloWorld'</span>,
template: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> </span>{
<span class="hljs-keyword">return</span> data ? <span class="hljs-string">'<h1>Hello '</span> + data + <span class="hljs-string">'! What A Curveball!</h1>'</span> : <span class="hljs-string">'Hello World'</span>;
}
}),
model: dataSources.sources.ArrayDataSource
});</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p>Create App and Export to window
Note: this version creates the global kronApp but if you choose to do so it could be
a commonjs module or amd module or any other module you choose. This is a detal left
up to the developer. Future tooling may move to a best practice for a certain module type
,most likely es6.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> kronApp = <span class="hljs-keyword">new</span> Kronicle().build({ modules: [dataSources, helloCtrl] });
<span class="hljs-built_in">window</span>.kronApp = kronApp;</pre></div></div>
</li>
</ul>
</div>
</body>
</html>