<!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>
Passing parameters to an UI
===========================
There are several ways to pass parameters to an UI.
One of then is to use the `self.setting(label[, value])` method.
#### self.setting(label[, value])
*Since*: `v0.5.0`
Gets o sets a value attribute.
```javascript
//To set
self.setting("attribute_name", {...});
```
```javascript
//To get
var attribute_value = self.setting("attribute_name");
```
#### self.settings(params)
*Since*: `v0.5.0`
Sets multiples and complex attributes values.
```javascript
self.settings({ person: { name:"test name"}, money: -67890.678, region: { country: "country test" }});
var attribute_value = self.setting("person.name");
```
iris.path = {
"screen": {
"welcome": {
"html": "welcome.html",
"js": "welcome.js"
}
},
"ui": {
"todo": {
"html": "todo.html",
"js": "todo.js"
}
}
};
$(window.document).ready(function () {
iris.baseUri('./');
iris.locale(
"en_US", {
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dateFormat: "m/d/Y h:i:s",
currency: {
formatPos: "s n",
formatNeg: "(s n)",
decimal: ".",
thousand: ",",
precision: 2,
symbol: "$"
},
number : {
decimal: ".",
thousand: ",",
precision: 2
}
}
);
// show the initial screen
iris.welcome(iris.path.screen.welcome.js);
});
iris.screen(function(self) {
self.todos = [
{ text: 'learn iris', done: true },
{ text: 'build an iris app', done: false }
];
self.create = function() {
self.tmpl(iris.path.screen.welcome.html);
self.get('archive').on('click', function (e) {
for ( var i = self.todos.length - 1; i >= 0; i-- ) {
if (self.todos[i].done) self.todos.splice(i, 1);
}
self.render();
});
self.get('add').on('click', function (e) {
var todo = { text: self.get('todoText').val(), done: false };
self.todos.push(todo);
self.get('todoText').val('');
self.render();
});
self.render();
};
self.render = function () {
self.destroyUIs('list');
var i, remaining = 0;
for ( i = 0; i < self.todos.length; i++ ) {
self.ui('list', iris.path.ui.todo.js, { index: i, parent: self }, self.APPEND);
remaining += self.todos[i].done ? 0 : 1;
}
self.inflate({
count: remaining + ' of ' + self.todos.length + ' remaining'
});
}
}, iris.path.screen.welcome.js);
<div>
<h2>Todo</h2>
<div>
<span data-jq-text='count'></span>
[ <a href="#" data-id="archive">archive</a> ]
<ul class="unstyled" data-id="list"></ul>
<input type="text" data-id="todoText" size="30"
placeholder="add new todo here">
<input data-id="add" type="button" value="add">
</div>
</div>
iris.ui(function (self) {
self.settings ({
index: -1,
parent: null
});
self.create = function() {
self.tmpl(iris.path.ui.todo.html);
var index = self.setting('index');
var parent = self.setting('parent');
var todo = parent.todos[index];
self.inflate(todo);
self.get().toggleClass('todo-done', todo.done);
self.get('check').on('click', function () {
todo.done = !todo.done;
parent.render();
});
};
},iris.path.ui.todo.js);
<li>
<input data-id="check" type="checkbox" data-jq-prop-checked="done">
<span data-jq-text="text"></span>
</li>