RactiveJS-01 Hello Ractive
参考
- http://www.sokis.org/2015/05/从零开始学ractivejs-系列（一）/
- http://www.ractivejs.org/60-second-setup
前言
RactiveJS是一个模板驱动的UI库，融入了很多Backbone的元素，。但又与Backbone不同，它有自己的Two-way binding引擎。而Backbone 却需要插件支持。
RactiveJS 内置了基本的选择器模块，Template引擎，封装的Event，Node等对象。
Two-way binding (双向绑定) 也就是 大家常说的 MVVM 或者 MV* 什么的。
貌似和react是两种不同的东西，但是和angularjs有相似之处。
这一系列主要是翻译自官网，现在用Ractive人的好像也不多，但是没办法，加入的这个项目就是用它，还是硬着头皮上吧。
Hello Ractive
来自官网的60s上手指南：（貌似ractive用的人不多，中文文档非常少，还是需要习惯阅读英文文档）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2-Ractivetitle>
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'>script>
head>
<body>
<h1>This is Ractive Testh1>
<div id="container">div>
<script type="text/ractive" id="template">
{{greeting}}, {{name}}!p>
script>
<script>
var ractive = new Ractive({
el : '#container',
template : '#template',
data : {name : 'ractive',greeting: 'hello'}
})
script>
body>
html>首先需要引入ractive的库文件（最新的稳定版本是0.73）：
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'>script>
RactiveJS需要一个模板，将输入传入模板，再将模板渲染到指定的html文档中。RactiveJS支持字符串或者script text 类型的容器。（只要type不等于text/javascripe即可）
<script type="text/ractive" id="template">
{{greeting}}, {{name}}!p>
script>然后进行双向绑定（two-way-binding），必须使用new字符构造一个Ractive对象，其中：
- el是要模板要插入的容器，可以使用节点、ID或者CSS选择符指定容器
- template是要被插入的模板，可以是一个选择器，一段文本。或RactiveJS （Ractive.parse()）预编译的模板对象
- data是需要绑定的数据源，也就是要传入到模板之中的数据对象，在data里面指定的变量可以随意在template随意使用
<script>
var ractive = new Ractive({
el : '#container',
template : '#template',
data : {name : 'ractive',greeting: 'hello'}
})
script>下面的指令可以实时更改传入模板的name的值
ractive.set('name', "tom")
ractive.set('greeting', "bye")Ractive与其他模板库的不同之处在于数据更新是局部的，对于通常的模板库，如果想要更改模板的数据，需要对整个视图进行重新渲染，也就意味着你需要删除所有已经创建的DOM节点，这是对内存的极大浪费。
在Ractive中，我们可以操作已经创建的视图，实现数据的局部更新。在数据set的过程中，RactiveJS会将
标签中的内容分成四个节点：
- {{greeting}}
- 空格
- {{name}}
- !
Ractive会将这四个节点对应的变量的引用缓存起来，当数据改变时则重新计算对应节点的变量值，而不改变其他无关节点。精确地改变文本节点的值比替换元素节点的速度快很多，尤其是在局部更改数据时。
更改元素属性
ReactiveJS可以通过类似的方式更改元素的属性：
<p style='color: {{color}}; font-size: {{size}}em; font-family: {{font}};'>
{{greeting}} {{name}}!
p>在渲染时只要增加对应的数据即可：
var ractive = new Ractive({
el: output,
template: template,
data: {
greeting: 'Hello',
name: 'world',
color: 'purple',
size: 4,
font: 'Georgia'
}
});也可以通过set更改元素的属性：
ractive.set({
color: 'red',
font: 'Comic Sans MS'
});主要注意的是，上面的代码虽然更改了元素的三个特性，但是Reactive认为它们都属于一个属性，所以只对DOM进行了一次更改。
获取数据
前面提到了，Ractive通过set可以设置变量值，同样，通过get可以获取变量值：
<body>
<div id="container">div>
<script type="text/ractive" id="template">
>Times this button has been clicked: {{counter}}</button>
script>
<script>
var ractive1 = new Ractive({
el : '#container',
template : '#template',
data : {
'counter' : 0
}
});
var button = document.getElementById('count');
button.addEventListener('click', function(){
ractive1.set('counter', ractive1.get('counter') + 1)
})
script>
body>上面的代码中，增加counter变量并初始化为0，在通过get获取该变量的值，并为按钮添加时间，实现点击计数的功能。
传统的模要实现上述功能可能会更复杂，需要在每次点击后移除后再重新插入button，并且需要每次手动绑定、解绑事件，或者通过时间代理实现，相比Ractive来说这些其实都不是必须的。
使用外部template文档
- 可以使用nodeJS的require和exports来实现
- 使用ajax实现，但是要注意ajax的异步执行：
<script>
$.ajax({
url : 'test2.tpl',
dataType : 'html',
async :false,
success : function(data){
var ractive = new Ractive({
el : '#container',
template : data,
data:{
jays : [111,222,333],
jay : this[0]
}
});
}
});
script>