Iris examples

<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://rawgithub.com/thegameofcode/iris/v0.6.0/dist/iris.min.js" type="text/javascript"></script>
    <script src="iris-path.js" type="text/javascript"></script>
    <script src="init.js" type="text/javascript"></script>
  </head>

  <body></body>

</html>

self.inflate(data)
===================

Write text, change the visibility, change attributes values, etc... in template elements using `data-jq-*` attributes.

The `data-jq-*` attributes invoke jQuery functions:
```js
data-jq-html == $(element).html()
data-jq-text == $(element).text()
data-jq-val == $(element).val()
data-jq-toggle == $(element).toggle()
data-jq-attr-xxx == $(element).attr(xxx)
data-jq-prop-xxx == $(element).prop(xxx)
```

`self.inflate()` function can do boring tasks for us, e.g.:

- Set element text:

In the presenter:
```javascript
self.inflate( {user : { name: "John Doe" }} );
```

In the template:
```html
<!-- The text "Not set yet" will be replaced by "John Doe" -->
<span data-jq-text="user.name">Not set yet</span>
```


- Change the visibility of an element:

In the presenter:
```javascript
self.inflate( {user : { isAdmin: true }} );
```

In the template:
```html
<!-- Show or hide the admin panel, according to the user -->
<div data-jq-toggle="user.isAdmin">
	...
</div>
```

- Set multiple attributes:

In the presenter:
```javascript
self.inflate( {user : { name: "John Doe", avatarUrl: "/img/john.jpg" }} );
```

In the template:
```html
<!-- Set the src attribute with the user's avatar URL -->
<!-- Set the title attribute with the user's name -->
<img data-jq-attr-src="user.avatarUrl" data-jq-attr-title="user.name" />
```

- Set input value:

In the presenter:
```javascript
self.inflate( {user : { name: "John Doe" }} );
```

In the template:
```html
<!-- Set the value attribute with the user's name -->
<input type="text" data-jq-val="user.name" />
```

iris.path = {
  "screen": {
    "welcome": {
      "html": "welcome.html",
      "js": "welcome.js"
    }
  }
};

$(window.document).ready(function () {
  iris.baseUri('./');
    
  // show the initial screen
  iris.welcome(iris.path.screen.welcome.js);
});

iris.screen(function (self) {

	self.create = function() {
    self.tmpl(iris.path.screen.welcome.html);
    
    self.get('name').on('keyup',function() {
      self.inflate({ name : this.value });
    });
		
	};

}, iris.path.screen.welcome.js);

<div>
    <h1>Hello <span data-jq-text="name">World</span>!</h1>
    Write your name:<input data-id="name">
</div>