指定的視圖

Question

ractive動畫考慮這樣的代碼（可在現場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，我可以使用自定義綁定來完成任務。

Answer 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 })"> 

對於更復雜的應用，你可以看看使用自定義事件或裝飾該代碼從控制器/視圖分離模型。