New HTML attributes: data-ui & data-ui-bind

[ghost]

Create a new HTML attribute to instantiate UIs easily.
Many times, the developer is forced to instantiate the UI inside the presenter, e.g.:

View

<div>
  <div data-id='detail'></div>
</div>

Presenter:

self.create = function () {
  self.ui('detail', iris.path.ui.user_detail);
}

With the new attribute, we can instantiate UIs in a simpler way, e.g.:

View

<div>
  <div data-ui='user_detail'></div>
</div>

In addition, we can create another attribute to automatize the component inflating: data-ui-bind

<div data-ui='user_detail' data-ui-bind='user-load'></div>

When the user-load event is triggered in somewhere, the user_detail is inflated. The equivalent in the current version may be:

Presenter:

self.create = function () {
  self.ui('detail', iris.path.ui.user_detail);

  self.on('user-load', function (user) {
    self.ui('detail').inflate(user);
  }
}

Other example (list):

<div data-ui='user_list_item' data-ui-bind='friends-load'></div>

When the friends-load event is triggered in somewhere, the UIs (user_list_item) are instantiated.
The equivalent in the current version may be:

<div>
  <div data-id='user_list'></div>
</div>

Presenter:

self.on('friends-load', function (users) {
  self.destroyUIs('user_list');
  for ( var i = 0; i < users.length; i++ ) {
    self.ui('user_list', iris.path.ui.user_list_item).inflate(users[i]);
  }
}

With these attributes we can reduce the presenters size considerably.