<article class="introduce">
	<header>
		<h3 t=1 style="color:#8a3838">
			{{#main}}
		</h3>
		<p><b><i class="ion-ios-navigate"></i> Ax</b> is a fast MVR JavaScript Framework.</p>

		<p>It require <b>Struct</b> utils lib, for the sake of better organization application structure with modular architecture<b>( AMD or CommonJS specification )</b>. This is not to replace <b>Backbone</b> or <b>Angular</b> etc, maybe it boring form of entertainment. Of course, it cooperate with <b>React & Vue</b> very well.</p>
		<br>
		
		<p><b><i class="ion-ios-circle-filled"></i> Struct</b> pass over <b>300 test case by Qunit</b> , and <b>Ax</b> call build with <b>Saucelabs</b>, support all the <b style="color:#000">ECMAScript5</b> compatible Browser.</p>
		<p><b style="color:#e25106">Browserstack</b> pass: <code>IE9+</code> <code>Chrome 30+</code> <code>Firefox 3+(>30)</code> <code>Opera 20+</code> <code>Yandex</code> <code><i class="ion-social-apple"></i> Safari 6+(Lion)</code> <code><i class="ion-social-android"></i> Android 4+</code></p>
		<br>
		<p style="min-height:125px"><img style="display:block; width:100%; max-width:700px; overflow:hidden; pointer-events: none; zoom:1;" src="app/styles/imgs/testing.png" alt="Ax Test by Saucelabs"></p>
		<br>

		<br>

		<div class="it-download">
		<mark style="margin-bottom:20px"><i class="ion-erlenmeyer-flask"></i>&nbsp; Latest version - {{#struct.VERSION}}</mark>
		<p>
			<span><b>Download pack</b> with <code>struct</code>&nbsp;&nbsp;</span>
			<a href="./axs.min.js" title="Download it" alt="Download it" rel="download" download='axs.min.js'>
				<i class="ion-android-checkmark-circle" style="vertical-align:-1px"></i>
				axs-{{#struct.VERSION}}.min.js (GZIP 15K)
			</a>
		</p>
		<br>
		<p>
			<span class="it-outlink">
				<a href="https://github.com/DemonCloud/ax" target="_blank"><i class="ion-social-github"></i> Encourage a Star</a> 
			</span> 
			<span class="it-outlink">
				<a href="test" target="_blank"><i class="ion-ios-analytics"></i> See Unit test</a> 
			</span>
			<span class="it-outlink">
				<a href="examples" target="_blank"><i class="ion-social-nodejs"></i> More Examples</a> 
			</span>
		</p>

		</div>
		
		<br>
	</header>

	<div class="it-block">
		<h3 class="target" t=2>{{#cap1}}</h3>
		<ul class="it-cap">
			<li>
				<a href="javascript:;" tc=2>
					<i class="ion-gear-a"></i> 
					<b> Struct</b>
				</a>
				<span> - Struct is basic utils in ax, Salute to K&amp;R <b>&lt;The C Programming Language&gt;</b>. It contains more than 100 practical function, also it can be used as a single tool. focus on functional programming, the limits of performance, and the function of packaging more easily</span>
			</li>
			<li>
				<a href="javascript:;" tc=2>
					<i class="ion-ios-pie"></i> 
					<b> Model</b>
				</a>
				<span> - Allows you to easily manage the data , model parse is the Immutable data, who can be monitored. So that data would not be modified by accident. Flexible authentication mechanism, to ensure the availability of data.</span>
			</li>
			<li>
				<a href="javascript:;" tc=2>
					<i class="ion-cube"></i> 
					<b> View</b>
				</a>
				<span> - The simple view is one of the essential of the app, it provides a flexible way to build the user interface, or use it as container for other view's lib (framework). it was given the complete events emitter and virtual DOM rendering mechanism by default way.</span>
			</li>
			<li>
				<a href="javascript:;" tc=2>
					<i class="ion-social-buffer"></i> 
					<b> Route</b>
				</a>
				<span> - A routing manager for application, support regular expressions to match the router with multiple actions. Detection of hash change and carry any parameters at the same time.</span>
			</li>
			<li>
				<a href="javascript:;" tc=2>
					<i class="ion-ionic"></i> 
					<b> Atom</b>
				</a>
				<span> - Aggregation model management way, it provides powerful Mixmin API to perform operations on data collection, and can be implemented across the pointer call closure model, looks like a powerful connector</span>
			</li>
		</ul>
	</div>

	<div class="it-block">
		<h3 t=3>{{#cap2}}</h3>
		<!-- example1 -->
		<div class="it-example-info" tc=3>
			Base
		</div>
		<div class="it-example">
			<div class="ite-code">
				<pre class="sh_javascript">
var view = ax.view({
	template:"&lt;span&gt;Hello &#123;&#123;-name&#125;&#125;&lt;/span&gt;"
});

view.mount(
	document.getElementById("mount1"),
	{ name : "Buke" }
);
				</pre>
			</div>
			<div class="ite-preview">
				<div class="ite-mount" id="mount1"></div>
			</div>
		</div>
		<!-- example1 end -->
		<!-- example2 -->
		<div class="it-example-info" tc=3>
			Two-way Data Binding
		</div>
		<div class="it-example">
			<div class="ite-code">
				<pre class="sh_javascript">
var model = ax.model();

var view = ax.view({
	template:"...", /* html */

	model:model,

	events:{
		"change:input":function(){
			 model.set("text",this.value);
		}
	}
});

view.mount(
	document.getElementById("mount2"),
	{ text: "Hello World" }
);
				</pre>
			</div>
			<div class="ite-preview">
				<div class="ite-mount" id="mount2"></div>
			</div>
		</div>
		<!-- example2 end -->
		<!-- example3 -->
		<div class="it-example-info" tc=3>
			Todo List
		</div>
		<div class="it-example">
			<div class="ite-code">
				<pre class="sh_javascript">
var trim = struct.string("trim");

var model = ax.model({
	name:"todolist",
	data:{ list:[] },
	store:true,
});

var view = ax.view({
	template:/* html ... */"",

	// auto [ data ] -> [ view ] binding
	model: model,

	events:{
		"submit:#form":function(event){
			event.preventDefault();

			var name = document.getElementById("name"),
					getName = name.value.trim();

			if(getName){
				name.value="";
				model.moc("list",{ name : getName });
			}
		},
		"click:.del":function(event){
			model.rm("list."+this.key);
		}
	}
});

view.mount(
	document.getElementById("mount3"),
	model.get()
);
				</pre>
			</div>
			<div class="ite-preview">
				<div class="ite-mount" id="mount3"></div>
			</div>
		</div>
		<!-- example3 end -->
	</div>

	<div class="it-block">
		<h3 t=4>{{#cap3}}</h3>
		<p>These examples were simple described the behavior of <b>Ax</b> and way of writing. u can get more example in here <a target="_blank" href="examples">More Examples</a>. Flexible and simple way of assembly is main design objective for Ax</p>
	</div>

	<footer>
		{{#copy}}
	</footer>
</article>
