Powerful composition with Obviel data-render
Obviel is the client side web framework I've been hacking on for the
past few years. It has among many other things a client-side template
language called Obviel Template. Obviel Template has a bunch of
nice features such as i18n support, about which I'll write more
later. But the feature I want to talk about today is the
data-render
directive.
Obviel lets you define views for types of objects, and render them on
elements. See my previous blog entry on the core of Obviel for a
very short introduction to this concept (note: data-handler
has
been renamed to data-on
). In web applications your Obviel views
are mostly going to have small templates - each view doing its own
thing: rendering a template for a model, handling user events,
etc. Complex UIs are created by composing views together.
data-render
is the tool that lets you do this easily from within a
template. If we have the following model of a todo list:
{ iface: 'todo-list', todos: [{ iface: 'todo-item', title: 'Item 1' }, { iface: 'todo-item', title: 'Item 2' }] }
Then we can create a view to render that todo-list
like this:
obviel.view({ iface: 'todo-list', obvt: '<ul><li data-repeat="todos" data-render="@."></li></ul>' });
What, you may ask, is @.
? It is Obviel Template's way to express
"the current object", in this case the current item in the todos
array that we are looping through using data-repeat
.
And we also need to be able to render an individual todo-item
:
obviel.view({ iface: 'todo-item', obvt: '<div>{title}</div>' });
Some benefits:
each view is doing one and only one thing
-
if
todo-item
has an event handler (for instance to handleclick
events), this will just work:obviel.view({ iface: 'todo-item', obvt: '<div data-on="click|clicked">{title}</div>', clicked: function() { alert("You clicked!"); } });
[update: fixed bug in code example by renaming 'click' to 'clicked']
The
todo-list
view is agnostic about what individual entries of thetodos
array actually are. So if you add aspecial-todo-item
to thetodos
array, and provide a view for it, it will just work too. This is pretty powerful if you are going to hook up entirely different events in it!
Have fun with Obviel and see you next time!
Comments
Comments powered by Disqus