官方API

http://www.ractivejs.org/

简单的使用

//html
<div id="container"></div>
<script id="template" type="text/ractive">
  <p>你好，{{name}}！</p>
</script>
//js
var ractive = new Ractive({
  el: '#container',
  template: '#template',
  data: {name: '吴彦祖'}
});

官方友情tips

• template参数最好是字符串，而不要是script标签（ID），因为模版文本可能来自一个大的文件，以至于需要加载（比如 $.ajax）。
• 长远考虑，调用Ractive的方法要分离单独文件维护。

详细的引导

1. 区别或者优于其他模版引擎的优势在于，我们如果要重新给模版灌数据，一般做法是重新重绘模版区域，但是这很费资源。Ractive可以这么做:

ractive.set( 'name', '胡歌' );

2.不仅仅可以动态更新DOM的文本，同样可以动态改变DOM元素的属性。比如：

<p style="color: {{color}}">属性更新</p>

3.如果想手动更新数据（比如绑定事件来更新呢），像这样：

document.getElementById( 'count' ).addEventListener( 'click' , function(){
  racitve.set( 'counter', ractive.get( 'counter' ) + 1);
}