Skip to content

Latest commit

 

History

History
46 lines (37 loc) · 1.74 KB

01.getting-started.md

File metadata and controls

46 lines (37 loc) · 1.74 KB
Raw

01. Getting started

Installation

Installation is simple as you can expect, just extract and place ajsf.js file inside your web project, as well as jQuery-like library (e.g. nunjs). After that, import script files into your index.html. Keep on mind, that jQuery-like library needs to be imported before ajsf(.min).js.

<html>
	<head>
		<script type="text/javascript" src="js/nunjs.min.js"></script>
		<script type="text/javascript" src="js/ajsf.min.js"></script>
	</head>
</html>

First application

Each ajsf application defines single context, that could contain custom JavaScript code and custom directives or filters. But first things first, let's define our first application.

var app = ajsf('app', function(context) {
	context.value = 'My value';

	return context;
});

This is context of our app.js. Be sure, that context is return parameter of definition function. Defined file could be imported into index.html and application should be initialized by adding attribute ajsf into html tag with value of application name. In our case it is simply app.

<html ajsf="app">
	<head>
		<script type="text/javascript" src="js/nunjs.min.js"></script>
		<script type="text/javascript" src="js/ajsf.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
	</head>
	<body>
		<input type="text" ajsf-bind="value" /><br />
		<span ajsf-bind="value"></span>
	</body>
</html>

As you can see, context.value is already used in this example as value of text input. Its value is also binded to span. If you'll try to change text input, the change will be visible in span as well.

Next chapter: 02. Built-in Attribute Directives