Version 0.5.2 Notes

Deprecated

WARNING: Theses functions and annotations are not maintained and have been deleted on this release.

• OLD self.tmpl(path, params) -> NEW self.tmpl(path)

• All ## annotations inside templates.

• The data-model attributes.

New features

1. data-jq-*

The data-model has been deprecated, you can use the new data-jq-* instead of:

	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)

Previous v0.5.2, you only can fill element's values with the self.inflate(data) function, e.g.

<div data-model="person.name"></div>
<span data-model="person.name"></span>
<button data-model="person.name"></button>
<input data-model="person.name" type="text" />

In the presenter:

self.inflate( {person : { name: "John Doe" }} );

Since v0.5.2 you can do things like:

• Change the visibility of an element:

<!-- Show or hide the admin panel, according to the user -->
<div data-jq-toggle="person.isAdmin">
....
</div>

Old versions equivalent:

// 1. add data-id=admin_panel to the template
// 2. in the presenter:
if ( person.isAdmin ) {
  self.get("admin_panel").show();
} else {
  self.get("admin_panel").hide();
}

• Set the target attribute:

<!-- Set the src attribute with the user's avatar URL -->
<img data-jq-attr-src="person.avatarUrl" />

Old versions equivalent:

// 1. add data-id=img to the template
// 2. in the presenter:
self.get("img").attr("src", person.avatarUrl);

• Set multiple attributes:

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

Old versions equivalent:

// 1. add data-id=img to the template
// 2. in the presenter:
self.get("img").attr("src", person.avatarUrl);
self.get("img").attr("title", person.name);

Summary:

• This will reduce tedious tasks and coding time.
• The templates will be a bit more complex, only a bit.
• With this changes, the self.inflate() function can do boring tasks for us.
• The presenter will have to manage less data-ids, so it will be more simple.

2. Screen.param()

You can use self.param(key) instead of implement self.awake(params), e.g.:

Now:

iris.screen(function (self) {
...
  function example () {
    console.log(self.param("paramName"));
  }
...
}

Before v0.5.2:

iris.screen(function (self) {
...
  var paramValue;

  self.awake = function (params) {
    if ( params && param.hasOwnProperty("paramName") ) {
      paramValue = param.paramName;
    }
  }

  function example () {
    console.log(paramValue);
  }
...
}

3. Event: iris.SCREEN_NOT_FOUND

Usage e.g.:

iris.on(iris.SCREEN_NOT_FOUND, function (path) {
  iris.log("Upss, path[" + path + "] not found");
  iris.navigate("#/404");
});

Updates

1. self.ui()

You can use self.ui(<data-id>) to retrieve UIs, e.g.:

1.1. When the UI has template mode = self.REPLACE (default) Now:

iris.screen(function (self) {
...
  self.create = function () {
    self.ui("example", iris.path.ui.example);
  }

  function example () {
    self.ui("example").sayHi();
  }
...
}

Before v0.5.2:

iris.screen(function (self) {
...
  var myUI;

  self.create = function () {
    myUI = self.ui("example", iris.path.ui.example);
  }

  function example () {
    myUI.sayHi();
  }
...
}

1.2. When the UI has template mode = self.APPEND Now:

iris.screen(function (self) {
...
  self.create = function () {
    self.ui("example", iris.path.ui.example);
    self.ui("example", iris.path.ui.example);
    self.ui("example", iris.path.ui.example);
  }

  function example () {
    // Destroy the first UI for example
    self.ui("example")[0].destroyUI();
  }
...
}

Before v0.5.2:

iris.screen(function (self) {
...
  var myUIs;

  self.create = function () {
    myUIs = [
        self.ui("example", iris.path.ui.example),
        self.ui("example", iris.path.ui.example),
        self.ui("example", iris.path.ui.example)
    ];
  }

  function example () {
    // Destroy the first UI for example
    myUIs[0].destroyUI();
    myUIs.splice(0, 1); // remember remove array reference to avoid memory leaks!
  }
...
}

2. iris.include

Now you can include external JS files (before only relative paths), e.g.:

iris.include("http://example.com/js/file.js", function(){
  console.log("The file.js has been loaded.")
});