Quick start - "hello world"

Let's start by creating a minimal web page that loads and uses the zynii library. In this example, I will simply link a couple of HTML controls to a model and set the values to 'hello' and 'world'. The page created in this tutorial can be viewed as Hello Demo.

Start by creating a fairly minimal web page and since this is the 21st century I assume you'll want to mark this as being HTML 5.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demo 1 - 'hello world'</title>
</head>
<body>
  <!-- some HTML will go here --> 
</body>
</html> 

The zynii web-site and most of the examples use bootstrap for layout and styling, so I include something like this in the <head> section:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 

However, you can use any kind of CSS/style-sheet - you don't have to use bootstrap!

The next stage is to load the zynii library. The code snippet below assumes you have a sub-folder called zynii containing the zynii files. However you can place the files wherever you want; just change the URL to your actual location.

<script src="zynii/zynii.js"> </script>

Now add a short amount of javascript to create an app, bind it to the HTML and set some values in the model. In this example, I am putting the code in an onload handler. If you are using something like jQuery you would probably want to use it's own ready event.

<script> 
var app;

function load() {
var data = {
    'a': 'Hello',
    'b': 'World'
};
app = ZYNII.newApp(data);
app.bind();
} // load
</script> 

Let's go through this line-by-line. app is declared outside of the load() handler. This is needed if you want to use the zynii debugger. (The debugger assumes your app will be a global variable called app.)

Inside the load() handler I set app to a newly created zynii app. Then I call app.bind() to bind the HTML to the data-model. Well it would if I had actually defined any HTML - see later.

This code doesn't get called unless I add an onload handler. The final HTML should look something like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demo 1 - 'hello world'</title>
  <!-- load your preferred style-sheets--> 
  <script src="zynii/zynii.js"> </script>
  <script> 
  var app;
  
  function load() {
    var data = {
        'a': 'Hello',
        'b': 'World'
    };
    app = newApp(data);
    app.bind();
  } // load 
  </script>
</head>
<body onload="load()">
  <!-- some HTML will go here --> 
</body>
</html> 

For a simple example that's about all the javascript you need. Now let's take a look at adding some HTML. I am going to add a couple of text boxes to the page and label them a and b. Like:

  <label>a:<input /></label>
  <label>b:<input /></label> 

The real power of zynii comes when you markup the HTML so that zynii knows how to bind the controls to the underlying data. With zynii you don't write code to link controls to values; instead you declare the relationship you want - and leave zynii to manage it for you.

The most important markup is to tell zynii what data in the model you want to be bound to a given element in the HTML. Use the data-zynii attribute. It's value should then be a path that lets you navigate to the specific value in the model. So here @a would refer to a property a of top level of the model. But you can refer to items further down the tree using say: @x.y.z This would return the value of z, which is a child property of y which is itself a child property of x. You can also refer to an element in an array using []. These paths are equivalent to the javascript you would use to locate an item within a JSON structure (ignoring the initial @).

  <label>a:<input data-zynii="@a" /></label>
  <label>b:<input data-zynii="@b" /></label> 

If you have followed the steps so far, you should have a web page with two text boxes, a and b. These will display the initial values from the model. Change the values in these boxes and the values in the model will get changed. You can also open the debugger, change the values in the data model - and see that values in the page have changed.