在视图中指定 racactive 动画答案

【问题标题】：specify ractive animation on view在视图中指定 racactive 动画
【发布时间】：2014-11-24 11:23:52
【问题描述】：

考虑这样一个代码（可在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});
});

这行得通。但请注意，在 js 方面（视图模型），我指定了应该是视图一部分的值，而不是视图模型：首先，任何东西都应该被动画化，其次，持续时间应该是一秒。在视图模型方面，我希望只有一个布尔变量会在视图方面变成动画。或者触发一个会触发动画的事件。但当然视图模型根本不应该知道会有任何动画。

那么应该如何正确使用 ractivejs 呢？使用 knockoutjs，我会使用自定义绑定来完成任务。

【问题讨论】：

标签： javascript mvvm ractivejs

【解决方案1】：

很久以前才注意到这个问题。在此示例中，您可以只从模板运行动画（请参阅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 })">

对于更复杂的用途，您可以考虑使用自定义事件或装饰器将代码与控制器/视图模型分开。

【讨论】：