-
Notifications
You must be signed in to change notification settings - Fork 13
Open
Labels
Description
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.