模版:Ractive.js

官方API

http://www.ractivejs.org/

简单的使用

//html
//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元素的属性。比如:

属性更新

3.如果想手动更新数据(比如绑定事件来更新呢),像这样:

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

你可能感兴趣的