Ractive 是一个 JavaScript 库，用于以不强迫用户进入特定框架的思维方式的方式构建反应式用户界面。它采用了完全不同的 dom 操作方法-节省了用户和浏览器不必要的工作。它实现了数据绑定、DOM实时更新、模板、事件处理等多个有用的功能,它专注于UI层,学习成本低
功能：
- 数据绑定，具有漂亮的声明性语法。
- 使用户在进行事件处理不会费劲。
- 灵活而高效的动画和过渡
一、hello world
首先创建一个index.html,引入ractive.js,并添加一个容器元素来渲染模板:
<body>
<div id='container'></div>
<script src='Ractive.js'></script>
</body>
<div id='container'></div>
<script id='template' type='text/ractive'>
<h1></h1>
</script>
<script src='ractive.js'></script>
<script>
var ractive = new Ractive({
el: 'container',
template: '#template',
data: { name:"Hello world"}
});
</script>
二、数据的更新
ractivejs数据的更新类似set、get存取器,通过set来更新数据，通过get来获取数据,例如上面Helloworld的例子中,我们打开控制台输入ractive.set('name',"alibaba"),你会看到页面上会立即更新,同时我们通过ractive.get('name')可以获取当前name的值
var list = [{name:"Jim"},{name:"LUCY"},{name:"LILY"}]
var listView = new Ractive({
el: 'container',
template: '#template',
data: { list:list}
});
//修改list第一个值为sone
listView.set('list.0.name','sone');
//获取修改后的值
console.log( listView.get('list') );
这里通过set('list.0.name')来动态修改数组第一个元素的name值.list.0表示数组的第一个元素.
三.数据的双向绑定
理解并掌握数据的双向绑定可以很大程度上提高我们的开发效率,不用再写那些繁琐的DOM操作代码
<div><h2>订阅报警状态:</h2>
<label><input type='radio' name='' value='Error' checked> red</label>
<label><input type='radio' name='' value='Warning'> green</label>
<label><input type='radio' name='' value='Critical'> blue</label>
<p>当前报警状态: </p>
</div>
上面代码为模板代码,通过简单模板我们就可以实现数据的双向绑定,将数据(javascript对象)映射到view层,界面的操作都会同步更新数据.这里我们可以通过listView.get('status')获取当前选中状态的值,同样可以通过set方法设置值. 在看一个复选框的例子
<li><input type='checkbox' name='' value=''> </li>
在控制台执行listview.get('selected'),你会发现返回的是一个数组,包含已选择的checkbox的值.
通常双向绑定都会提供一个watch功能,在ractivejs中实现watch是observe方法,它监听绑定数据的变化,在上面的radiobox的demo上我们扩展一个功能,当选中error时,弹出一个提示框
listView.observe('status',function(newvalue,oldvalue){
if(newvalue==="Error"){
alert('你选择了Error')
}
})
observe的回调中返回newcalue与oldvalue,分别对应的是改变之后与改变之前的值.其它对绑定数据的操作例如push、splice都会触发observe
四.事件处理
使用ractivejs时，我们使用代理事件的方法,首先在模板声明代理事件,然后在js代码中订阅事件
<li> <button on-click="del:">删除</button></li>
<p><input type="text" value="" ><button on-click="add">添加</button></p>
<p><button on-click="show">查看当前列表的值</button></p>
listViewevent.on({
add:function(){
var name = this.get('name');
if(name.replace(/(^s*)|(s*$)/g, "").length===0){
return
}
this.push('list',name);
},
del:function(event,index){
this.splice('list',index,1)
}
})
特别注意的是上面的del方法,我们传了一个index参数，这个参数表示当前数组元素的索引,这个index值是在模板中通过del:方式传进去的.同时我们可以看到,大部分逻辑都是在操作数据,ractivejs官方也提供了很多操作数据的方法.
链接: https://fly63.com/nav/3249
