html模板中绑定数据,Rivets.js - 数据绑定和模板系统使用详解1（基本介绍、绑定器的使用）...

一、Rivets.js介绍与配置

1，基本介绍

Rivets.js 是一个轻量级的数据绑定(支持单项、双向绑定)和模板系统，用于构建数据驱动的视图界面。使用它，我们可以很方便地将前端 MV(C|VM|P) 各个方面集成业务流程中。

2，安装配置

要使用 Rivets十分简单，只要将rivets.js引入进来即可。由于 Rivets依赖于 Sightglass，我们还需将其引入。同时为了方便使用，这里再引入个 jQuery。

二、一个简单的样例演示

1，效果图

页面加载完毕后，通过 Rivets将定义好的数据模型绑定到页面元素上，并通过插值(interpolation)的方式显示出来。

2，样例代码

hangge.com

$(document).ready(function(){

//数据模型

var hangge = {

name : "hangge.com",

info : "做最好的开发者知识平台"

}

//绑定并显示模型

rivets.bind($("#detail"), {

hangge: hangge

});

});

欢迎访问 { hangge.name }

{ hangge.info }

三、各种内置的绑定器性的介绍

上面我演示了通过插值(interpolation)的方式显示绑定数据，Rivets还提供了许多元素属性来实现绑定。

1，rv-text(设置元素text值)

(1)js代码

//数据模型

var hangge = {

name : "hangge.com",

info : "做最好的开发者知识平台"

}

//绑定并显示模型

rivets.bind($("#detail"), {

hangge: hangge

});

(2)html页面代码

上面其实相当于如下插值形式：

{ hangge.name }

(3)运行结果如下：