specify ractive animation on view

Question

Consider such a code (available live at http://jsfiddle.net/w1n3rqvc/1/):

<!-- html code -->
<script type="text/ractive" id="rootTemplate">
    <div style="background-color: rgba(0, 128, 0, {{opacity}});width: 100px; height: 100px;">
    </div>
    <input type="button" value="Click me!" on-click="click"/>
</script>

<div id="root">
</div>

//js code
var viewModel={
    opacity: 0
};

var ractive = new Ractive({ el: 'root', template: '#rootTemplate', data: viewModel, magic: true, lazy: true });
ractive.on('click', function(){
    ractive.set("opacity", 0.0);
    ractive.animate("opacity", 1.0, {duration: 1000});
});

This works. But please note that on the js side (view model) I specify values that should be part of the view, not view model: first that anything should be animated at all, secondly that the duration should be one second. On the view model side I would expect to have only a boolean variable that would turn into animation on the view side. Or fire an event that would trigger the animation. But certainly the view model should not know that there will be any animation at all.

So how should it be done properly with ractivejs? With knockoutjs I would have used a custom binding to accomplish the task.

Answer 1

Just noticed this question from quite awhile ago. In this example, you could just run the animation from the template (see http://jsfiddle.net/w1n3rqvc/5/):

<div style="background-color: rgba(0, 128, 0, {{opacity}});width: 100px; height: 100px;">
</div>

<input type="button" value="Click me!" 
       on-click="animate('opacity', 1, { duration: 1000 })">

For more complex uses, you could look at using a custom event or a decorator to separate that code from the controller/view model.