Ractive.js使用入门
2016-03-16 21:15
656 查看
Ractive.js简介
Ractive.js是一款入门容易却功能强大的JS库，它的主旨是模板+数据=UI，数据的双向绑定，DOM节点的实时更新，事件处理等多个有用的功能。它吸取了AngularJS中的一些灵感，因此两者在有些地方是有相似之处的。对于一些中小型项目，完全可以用这个框架作为前端框架进行开发，可以快速建立起项目的前端模型。RactiveJS 内置了基本的选择器模块，Template引擎，封装的Event，Node等对象。所以如果没有特别的需求，我们几乎可以不用jQuery 这类框架了。
网上关于Ractive.js的使用描述甚少，唯一的官网还是英文的，http://www.ractivejs.org/，相信很多害怕英文的同学都会望而却步，写这篇博客，想通过自己切身的使用经历给出一些Demo，让大家来了解这个库的基本使用。
Ractive.js使用
一、需要的js文件
需要引入的js文件一共有两个，下面demo中都要引入这两个js文件，就不再赘述了。1、Ractive.js的库文件：在官网上有完整的引用路径，也可以将该文件复制下来放在工程中进行引入。
2、jQuery库文件，我用的是v1.11.3版本
二、demo
下面的这一大段html其实就是一个页面的主要框架，下面通过js代码加载模板，或者直接读取定义在当前页面的ractive模板<html> <head> <title></title> <meta charset="utf-8"> <script src="../js/lib/jquery.js"/> <script src="http://cdn.ractivejs.org/latest/ractive.js"/> <script src="../js/index_01.js"/> </head> <body style="width: 80%; margin: 0 auto;"> <h1> 1. 模块化 </h1> <div id="module"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 2. 用于行内样式 </h1> <div id="inline-style"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 3. 内嵌属性 </h1> <div id="nested-properties"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 4. 表达式 </h1> <div id="expressions"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 5. 事件代理 </h1> <div id="event-proxies"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 6. 条件剖面 </h1> <div id="conditional-sections"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 7. 列表部分 </h1> <div id="list-sections"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 8. 原始标签 </h1> <div id="triples"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 9. 双向绑定 </h1> <div id="two-way-binding"> <span>loading...</span> </div> <div style="clear: both;"></div> <h1> 10. 片段 </h1> <div id="partials"> <span>loading...</span> </div> <div style="clear: both;"></div> </body> </html>
模块化
因为我们渲染模板必须保证DOM元素已经渲染完毕，所以要写在$(function(){})中，发送一个ajax请求，获取模板文件，回调函数的参数就是获取到的模板对象，如果是直接获取定义在页面上形状如《script id=”template” type=”text/ractive”>的模板就不必执行请求加载，另外必须保证模板是正确的html代码片段，闭合元素必须都有闭合标签,否则会报错导致页面加载不出来。第一个例子就是ractive的核心用法，其实也只要用这一个就够了。$(function() {
$.get("../template/template_01.html", function(template) {
var ractive = new Ractive({
//el实质上是一个选择器，可以是#id,.class等等，同jQuery
//其实就是替换了el选择器对应元素的innerHTML
el : '#module',
//template是模板对象，可以是ajax回调中的模板对象
//也可以是一段html代码，也可是定义在当前页上某个模板的id
template : template,
//data就是要放到模板中的数据，是一个json对象，value可以是方法
data : {
list : []
},
//模板渲染时执行的回调函数
onrender : function() {
//this表示当前ractive对象，list就是data中的list
//把getJson()方法的返回值复制给list
//类似AngularJs中的$scope.list=getJson();
this.set("list", getJson());
},
//模板渲染完毕执行的回调函数
//如果要动态给模板中的DOM绑定一些动态jQuery事件
//建议写在这里
oncomplete:function(){
}
});
});行内样式
这个例子注意color其实是作为行内样式style中color的值传到模板上如果做控制的话，就可以是样式动态改变
$.get("../template/template_02.html", function(template) {
var ractive = new Ractive({
el : '#inline-style',
template : template,
data : {
date : "20150901",
title : "title1",
rate : 1,
month : 1,
amount : 1,
guaranteeMethod : "guarantee method1",
payMethod : "pay method1",
comment : "comment1",
color : "#23b574"
}
});
});内嵌属性
这个例子将年月日分别传到模板，并且将它们用横线连起来{{date.year + “-” + date.month + “-” + date.day}}
其实像AngularJs一样，模板页面上的表达式也是支持一些JS内置语法的
$.get("../template/template_03.html", function(template) {
var ractive = new Ractive({
el : '#nested-properties',
template : template,
data : {
date : {
year : "2015",
month : "09",
day : "01"
},
title : "title1",
rate : 1,
month : 1,
amount : 1,
guaranteeMethod : "guarantee method1",
payMethod : "pay method1",
comment : "comment1"
}
});
});自定义表达式
注意data中的format实际上是一个方法，这个方法是用来替换字符串中的-为/的，将方法作为对象传到模板，使用只要这样：{{format(date)}}$.get("../template/template_04.html", function(template) {
var ractive = new Ractive({
el : '#expressions',
template : template,
data : {
date : "2015-09-01",
title : "title1",
rate : 1,
month : 1,
amount : 1,
guaranteeMethod : "guarantee method1",
payMethod : "pay method1",
comment : "comment1",
format : function(date) {
return date.replace(/-/g, "/");
}
}
});
});事件代理
先在模板要绑定事件的元素上绑定事件，例如一个元素的click事件on-click=”silence”
注意：一般的click写法是onclick=”silence()”
然后到js中进行事件绑定ractive.on()方法的参数是一个json，key就是绑定的事件名，注意，事件的回调方法是有参数的，但是与一般jQuery稍有区别，虽然也是当前触发事件的对象，但是要写$(e.node)
$.get("../template/template_05.html", function(template) {
var ractive = new Ractive({
el : '#event-proxies',
template : template
});
var listener = ractive.on({
activate : function() {
alert('activating!');
},
deactivate : function() {
alert('Deactivating!');
},
silence : function() {
alert('No more alerts!');
//取消事件绑定
listener.cancel();
}
});
});条件剖面
{{#if 条件表达式}}如果表达式值为false，这里就不会渲染{{if}}{{#if 条件表达式1}}{{elseif 条件表达式1}}{{/if}}，elseif是没有闭合的
// conditional section
$.get("../template/template_06.html", function(template) {
var ractive = new Ractive({
el : '#conditional-sections',
template : template,
data : {
activate : true,
deactivate : false,
silence : true
}
});
});列表部分
对于循环，有如下三种方式，循环中的表达式直接写list中元素对应的key，不是{{list.key}},直接就是{{key}}{{#list:i}}{{/list}}
{{#each list}}{{/each}}
{{#each list:i}}{{/each}}
$.get("../template/template_07.html", function(template) {
var ractive = new Ractive({
el : '#list-sections',
template : template,
data : {
list : getTable()
}
});
});原始标签
{{{content}}}不会对content中含有的html标签进行转义显示，下面的例子显示的就是《h5》标签测试《/h5》（尖括号打了被转义了，所以用书名号代替）$.get("../template/template_08.html", function(template) {
var ractive = new Ractive({
el : '#triples',
template : template,
data : {
content : "《h5》标签测试《/h5》"
}
});
});双向绑定
1、假设模版中如果有两处是通过同一个对象绑定的值，如果一处导致这个对象的值发生了改变，则这两处的值会一起改变。2、我们通过ractive.set(“key”,”value”)可以替换页面上key对象对应的值，并且变化会立刻体现在页面上。
$.get("../template/template_09.html", function(template) {
var ractive=new Ractive({
el : '#two-way-binding',
template : template,
data : {
colors : [ "red", "green", "blue" ]
}
});
});片段
这个例子中的partials就是片段，我们可以将一段ractive片段放在partials中传入模板，模版中这么写：{{>item}}，会自动解析并执行这个片段$.get("../template/template_10.html", function(template) {
var item = "{{#if ok}}ok{{/if}}";
var ractive = new Ractive({
el : '#partials',
template : template,
partials : {
item : item
},
data : {
date : "20150901",
title : "title1",
rate : 1,
month : 1,
amount : 1,
guaranteeMethod : "guarantee method1",
payMethod : "pay method1",
comment : "comment1",
ok : true
}
});
});//获取表格数据，第7个demo用到了这个方法
function getTable() {
var result = [];
for (var i = 0; i < 20; i++) {
var tr = {
td1 : "data" + i,
td2 : "data" + i,
td3 : "data" + i,
td4 : "data" + i,
td5 : "data" + i,
td6 : "data" + i,
td7 : "data" + i,
td8 : "data" + i,
td9 : "data" + i
};
result.push(tr);
}
return result;
}
//制造假的json数据，第一个demo用到了这个方法
function getJson() {
var result = [];
for (var i = 0; i < 5; i++) {
var invest = {};
invest.date = "2015090" + i;
invest.title = "title" + i;
invest.rate = i;
invest.month = i;
invest.amount = i * 1000;
invest.guaranteeMethod = "guarantee method" + i;
invest.payMethod = "pay method" + i;
invest.comment = "comment" + i;
result.push(invest);
}
return result;
}模块化demo对应模板
{{#each list}}
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
<h1 style="font-size:16px;font-weight:bold;color:#333">{{date}}</h1>
<h2 style="font-size:14px;color:#333;">{{title}}</h2>
<div style="background-color:#f8f6ed;overflow:hidden;">
<div style="float:left;width:45%;">
<div style="padding-left:30px;border-right:1px solid #ece4cd;">
<h3 style="color:#d8000f">{{rate}}%</h3>
<h4>年化收益</h4>
</div>
</div>
<div style="float:left;width:45%;">
<div style="padding-left:30px">
<h3 style="color:#d8000f">{{month}}个月</h3>
<h4>借款周期</h4>
</div>
</div>
</div>
<ul style="padding-left:0px;color:#716147;font-size:12px;">
<li style="list-style:none;padding:5px 0;">借款金额:{{amount}}元</li>
<li style="list-style:none;padding:5px 0;">还款方式:{{payMethod}}</li>
<li style="list-style:none;padding:5px 0;">担保方式:{{guaranteeMethod}}</li>
<li style="list-style:none;padding:5px 0;">审贷意见:{{comment}}</li>
</ul>
<div>
<button style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">投标</button>
</div>
</div>
{{/each}}行内样式demo对应模板
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
<h1 style="font-size:16px;font-weight:bold;color:#333">{{date}}</h1>
<h2 style="font-size:14px;color:#333;">{{title}}</h2>
<div style="background-color:#f8f6ed;overflow:hidden;">
<div style="float:left;width:45%;">
<div style="padding-left:30px;border-right:1px solid #ece4cd;">
<h3 style="color:#d8000f">{{rate}}%</h3>
<h4>年化收益</h4>
</div>
</div>
<div style="float:left;width:45%;">
<div style="padding-left:30px">
<h3 style="color:#d8000f">{{month}}个月</h3>
<h4>借款周期</h4>
</div>
</div>
</div>
<ul style="padding-left:0px;color:#716147;font-size:12px;">
<li style="list-style:none;padding:5px 0;">借款金额:{{amount}}元</li>
<li style="list-style:none;padding:5px 0;">还款方式:{{payMethod}}</li>
<li style="list-style:none;padding:5px 0;">担保方式:{{guaranteeMethod}}</li>
<li style="list-style:none;padding:5px 0;">审贷意见:{{comment}}</li>
</ul>
<div>
<button style="width:200px;border-radius:18px;background:{{color}};border:none;color:white;display:block;margin:0 auto;font-size:18px;">投标</button>
</div>
</div>内嵌属性demo对应模板
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
<h1 style="font-size:16px;font-weight:bold;color:#333">{{date.year + "-" + date.month + "-" + date.day}}</h1>
<h2 style="font-size:14px;color:#333;">{{title}}</h2>
<div style="background-color:#f8f6ed;overflow:hidden;">
<div style="float:left;width:45%;">
<div style="padding-left:30px;border-right:1px solid #ece4cd;">
<h3 style="color:#d8000f">{{rate}}%</h3>
<h4>年化收益</h4>
</div>
</div>
<div style="float:left;width:45%;">
<div style="padding-left:30px">
<h3 style="color:#d8000f">{{month}}个月</h3>
<h4>借款周期</h4>
</div>
</div>
</div>
<ul style="padding-left:0px;color:#716147;font-size:12px;">
<li style="list-style:none;padding:5px 0;">借款金额:{{amount}}元</li>
<li style="list-style:none;padding:5px 0;">还款方式:{{payMethod}}</li>
<li style="list-style:none;padding:5px 0;">担保方式:{{guaranteeMethod}}</li>
<li style="list-style:none;padding:5px 0;">审贷意见:{{comment}}</li>
</ul>
<div>
<button style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">投标</button>
</div>
</div>表达式demo对应模板
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
<h1 style="font-size:16px;font-weight:bold;color:#333">{{format(date)}}</h1>
<h2 style="font-size:14px;color:#333;">{{title}}</h2>
<div style="background-color:#f8f6ed;overflow:hidden;">
<div style="float:left;width:45%;">
<div style="padding-left:30px;border-right:1px solid #ece4cd;">
<h3 style="color:#d8000f">{{rate}}%</h3>
<h4>年化收益</h4>
</div>
</div>
<div style="float:left;width:45%;">
<div style="padding-left:30px">
<h3 style="color:#d8000f">{{month}}个月</h3>
<h4>借款周期</h4>
</div>
</div>
</div>
<ul style="padding-left:0px;color:#716147;font-size:12px;">
<li style="list-style:none;padding:5px 0;">借款金额:{{amount}}元</li>
<li style="list-style:none;padding:5px 0;">还款方式:{{payMethod}}</li>
<li style="list-style:none;padding:5px 0;">担保方式:{{guaranteeMethod}}</li>
<li style="list-style:none;padding:5px 0;">审贷意见:{{comment}}</li>
</ul>
<div>
<button style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">投标</button>
</div>
</div>事件代理demo对应模板
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
<div style="margin:20px auto;">
<button on-click="activate"style="width:200px;border-radius:18px;background:{{color}};border:none;color:white;display:block;margin:0 auto;font-size:18px;">Activate</button>
</div>
<div style="margin:20px auto;">
<button on-click="deactivate" style="width:200px;border-radius:18px;background:#23b574;border:none;color:white;display:block;margin:0 auto;font-size:18px;">Deactivate</button>
</div>
<div style="margin:20px auto;">
<button on-click="silence" style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">Silence</button>
</div>
</div>条件剖面demo对应模板
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
{{#if activate}}
<div style="margin:20px auto;">
<button on-click="activate"style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">Activate</button>
</div>
{{/if}}
{{#if deactivate}}
<div style="margin:20px auto;">
<button on-click="deactivate" style="width:200px;border-radius:18px;background:#23b574;border:none;color:white;display:block;margin:0 auto;font-size:18px;">Deactivate</button>
</div>
{{elseif true}}
<div style="margin:20px auto;">
<button style="width:200px;border-radius:18px;background:#23b574;border:none;color:white;display:block;margin:0 auto;font-size:18px;">无效按钮，演示用</button>
</div>
{{/if}}
{{#if silence}}
<div style="margin:20px auto;">
<button on-click="silence" style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">Silence</button>
</div>
{{/if}}
</div>列表部分demo对应模板
<table style="width:100%;text-align:center;color:#777;font-size:14px;">
<thead>
<tr>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">#</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题1</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题2</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题3</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题4</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题5</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题6</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题7</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题8</th>
<th style="background:rgba(0,0,0,0.7);color:white;padding:2px;">标题9</th>
</tr>
</thead>
<tbody>
{{#list:i}}
<tr>
<td>{{++i}}</td>
<td>{{td1}}</td>
<td>{{td2}}</td>
<td>{{td3}}</td>
<td>{{td4}}</td>
<td>{{td5}}</td>
<td>{{td6}}</td>
<td>{{td7}}</td>
<td>{{td8}}</td>
<td>{{td9}}</td>
</tr>
{{/list}}
</tbody>
</table>原始标签demo对应模板
{{{content}}}双向绑定demo对应模板
<label>
Enter your name:
<input value='{{name}}'>
</label>
<p>Hello, {{name}}!</p>
<label>
<input type='checkbox' checked='{{checked}}'>
{{#if checked}}
checked!
{{else}}
not checked
{{/if}}
</label>
<fieldset style="border:none;padding-left:0;">
<label><input type='radio' name='{{color}}' value='red' checked> red</label>
<label><input type='radio' name='{{color}}' value='green'> green</label>
<label><input type='radio' name='{{color}}' value='blue'> blue</label>
<p>The selected colour is <span style='color: {{color}};'>{{color}}</span>.</p>
</fieldset>
<select value='{{selectColor}}'>
{{#each colors}}
<option>{{this}}</option>
{{/each}}
</select>
<p>The selected colour is <span style='color: {{selectColor}};'>{{selectColor}}</span>.</p>片段demo对应模板
<div style="width:240px;height:330px;border:1px solid #dddddd;padding:10px;float:left;margin:10px">
{{>item}}
<h1 style="font-size:16px;font-weight:bold;color:#333">{{date}}</h1>
<h2 style="font-size:14px;color:#333;">{{title}}</h2>
<div style="background-color:#f8f6ed;overflow:hidden;">
<div style="float:left;width:45%;">
<div style="padding-left:30px;border-right:1px solid #ece4cd;">
<h3 style="color:#d8000f">{{rate}}%</h3>
<h4>年化收益</h4>
</div>
</div>
<div style="float:left;width:45%;">
<div style="padding-left:30px">
<h3 style="color:#d8000f">{{month}}个月</h3>
<h4>借款周期</h4>
</div>
</div>
</div>
<ul style="padding-left:0px;color:#716147;font-size:12px;">
<li style="list-style:none;padding:5px 0;">借款金额:{{amount}}元</li>
<li style="list-style:none;padding:5px 0;">还款方式:{{payMethod}}</li>
<li style="list-style:none;padding:5px 0;">担保方式:{{guaranteeMethod}}</li>
<li style="list-style:none;padding:5px 0;">审贷意见:{{comment}}</li>
</ul>
<div>
<button on-click="transform" style="width:200px;border-radius:18px;background:#d8000f;border:none;color:white;display:block;margin:0 auto;font-size:18px;">投标</button>
</div>
</div>看完了这些demo，你对Ractive.js的用法是否有了初步了解呢？事实上真正的开发过程中用到这些语法已经足够了，可能还会结合jQuery去做一些操作。
再啰嗦几句，这些是我自己的经验，记住，不要在同一元素上既用ractive又用jQuery绑定事件，会冲突执行两次，如果要在模板上去使用一些其他前端插件，请将它们的渲染放在oncomplete回调方法中。这样才能保证DOM节点已经都出来了。如果模板不需要复用多次，那就直接写在当前的页面中<script id=”template” type=”text/ractive”>这里是模板的内容，毕竟可以省掉ajax加载模板文件的一次请求。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享