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

2017-06-26 发布：hangge 阅读：2813

相关文章系列：
[当前文章] Rivets.js - 数据绑定和模板系统使用详解1（基本介绍、绑定器的使用）
Rivets.js - 数据绑定和模板系统使用详解2（格式化器的使用、函数调用）
Rivets.js - 数据绑定和模板系统使用详解3（组件封装、默认配置的修改）

一、Rivets.js介绍与配置

1，基本介绍

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

官网地址：http://rivetsjs.com/
GitHub主页：https://github.com/mikeric/rivets

2，安装配置

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

jQuery：http://jquery.com/
Sightglass：https://github.com/mikeric/sightglass
Rivets：https://github.com/mikeric/rivets

<script src="js/jquery.js"></script>
<script src="js/sightglass.js"></script>
<script src="js/rivets.js"></script>

二、一个简单的样例演示

1，效果图

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

2，样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="js/jquery.js"></script>
    <script src="js/sightglass.js"></script>
    <script src="js/rivets.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        
        //数据模型
        var hangge = {
          name : "hangge.com",
          info : "做最好的开发者知识平台"
        }

        //绑定并显示模型
        rivets.bind($("#detail"), {
          hangge: hangge
        });

      });
    </script>
  </head>
  <body>
    <section id="detail">
      <h3>欢迎访问 { hangge.name }</h3>
      <p>{ hangge.info }</p>
    </section>
  </body>
</html>

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

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

1，rv-text（设置元素text值）

（1）js 代码

//数据模型
var hangge = {
  name : "hangge.com",
  info : "做最好的开发者知识平台"
}

//绑定并显示模型
rivets.bind($("#detail"), {
  hangge: hangge
});

（2）html 页面代码

<section id="detail">
  <h3 rv-text="hangge.name"></h3>
</section>

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

<section id="detail">
  <h3>{ hangge.name }</h3>
</section>

（3）运行结果如下：

2，rv-html（设置元素HTML内容）

（1）js 代码

//数据模型
var hangge = {
  name : "hangge.com",
  content : "<ul><li>条目1</li><li>条目2</li><li>条目3</li></ul>"
}

//绑定并显示模型
rivets.bind($("#detail"), {
  hangge: hangge
});

（2）html 页面代码

<section id="detail">
  <h3 rv-html="hangge.content"></h3>
</section>

（3）运行结果如下：

3，rv-show（设置元素是否显示）

如果绑定的值为 true 时，则显示该元素。否则便隐藏该元素。

<button rv-show="user.admin">Remove</button>

4，rv-hide（设置元素是否隐藏）

同上面刚好相反。如果绑定的值为 true 时，则隐藏该元素。否则便显示该元素。

<section rv-hide="feature.disabled"></section>

5，rv-enabled（设置元素是否可用）

如果绑定的值为 true 时，则该元素可用。否则便不可用。

<button rv-enabled="user.canVote">Upvote</button>

6，rv-disabled（设置元素是否不可用）

同上面刚好相反。如果绑定的值为 true 时，则该元素不可用。否则便可用。

<button rv-disabled="user.suspended">Upvote</button>

7，rv-if（设置元素是否存在页面上）

如果绑定的值为 true 时，则该将该元素插入到 DOM 中，并绑定数据。否则便将改元素从 DOM 中移出，并解除绑定。

<section rv-if="item.editable"></section>

8，rv-unless（设置元素是否不存在页面上）

同上面刚好相反。如果绑定的值为 true 时，则该将该从 DOM 中移出，并解除绑定。否则便将改元素插入到 DOM 中，并绑定数据。

<section rv-unless="item.locked"></section>

9，rv-value（绑定元素的value值）

注意的是这个是双向绑定：

如果绑定对象的值改变时，元素的 value 值会同步变化。
如果元素的 value 值变化时（比如下面输入框内文字改变时），绑定对象的值也会同步改变。

<input rv-value="item.name">

10，rv-checked（设置元素是否选中）

这个用于设置复选框（checkbox）、单选框（radio）是否选中（checked）。如果绑定值为 true，则表示选中。
注意：这个也是双向数据绑定。

<input type="checkbox" rv-checked="item.enabled">

11，rv-unchecked（设置元素是否未选中）

这个同上面相反，用于设置复选框（checkbox）、单选框（radio）是否未选中（unchecked）。如果绑定值为 true，则表示未选中。
注意：这个也是双向数据绑定。

<input type="checkbox" rv-unchecked="item.disabled">

12，rv-on-[event]（绑定元素的各种事件）

将各种回调函数绑定到元素相应的监听事件上。注意：如果后面又绑定了新的回调方法，那么老的监听回调会自动先解除绑定。下面以绑定按钮的点击事件为例
（1）js 代码

//数据模型
var item = {
  name : "点击",
  showInfo : showInfo
}

//按钮点击响应方法
function showInfo(e, model) {
  console.log(e);
  console.log(model);
  alert("欢迎访问 hangge.com");
}

//绑定并显示模型
rivets.bind($("#detail"), {
  item: item
});

（2）html 页面代码

<section id="detail">
  <button rv-on-click="item.showInfo">{ item.name }</button>
</section>

（3）点击按钮后会弹出消息框。

传递自定义参数：
默认情况下事件处理函数会接收到两个参数：事件本身、以及模型上下文。如果想再传递自定义参数，可以参考我的另一篇文章：Rivets.js - 实现rv-on-[event]事件的自定义参数传递（以onclick事件为例）

13，rv-each-[item]（循环数组自动添加元素）

遍历数组中的每个项，每次自动添加一个的新的元素实例。每个元素都绑定了一个全新的嵌套视图，该视图包含一个额外的属性（命名依据 [item]），该属性指向数组中当前的迭代项。下面以生成一个计划列表为例：

（1）js 代码

//数据模型
var todos = [{
              name: "游泳健身",
              done: true
            },{
              name: "写项目总结",
              done: false
            },{
              name: "大扫除",
              done: true
            }]

//绑定并显示模型
rivets.bind($("#detail"), {
  todos: todos
});

（2）html 页面代码。注意：通过 %modelName% 可以获得当前项的 index 索引

<section id="detail">
  <ul>
    <li rv-each-todo="todos">
      <input type="checkbox" rv-checked="todo.done"> {%todo%}：{todo.name}
    </li>
  <ul>
</section>

（3）运行结果如下：

（4）下面是一个双重嵌套的循环迭代。注意：在嵌套的 rv-each 中，其父索引仍然可以通过模型名称在范围内访问。

<ul>
  <li rv-each-user="app.users">
    <span>User Index : { %user% }</span>
    <ul>
        <li rv-each-comment="user.comments">
            <span>Comment Index : { %comment% }</span>
            <span>User Index : { %user% }</span>
        </li>
    </ul>
  </li>
<ul>

14，rv-class-[classname]（设置元素的样式）

如果绑定的值为 true 时，则该元素添加相关的样式（class 名由 [classname] 决定）。否则便删除元素该样式。
下面代码如果 todo.done 为 true，则给 li 元素添加个 completed 样式。

<li rv-class-completed="todo.done">条目1</li>

15，rv-[attribute]（设置元素的属性）

attribute 表示要设置的属性名，下面将 input 的 placeholder 属性值与模型绑定起来。

<input type="text" rv-placeholder="field.placeholder">

四、自定义绑定器

虽然使用内置的绑定器我们可以实现大多数 UI 任务，但对于特定的需求，我们还可以创建我们自己的绑定器。

1，单向绑定器

单向绑定器只在模型属性更改时才更新 DOM（仅限模型到视图）。

（1）这里我们我们定义一个单向的 color 绑定器，实现通过更新模型属性，自动更改元素的颜色。

//自定义的color绑定器（rv-color）
rivets.binders.color = function(el, value) {
  el.style.color = value
}

（2）下面是一个测试样例。
js 代码：

//数据模型
var label = {
    name: "提交",
    color: "#FF0000"
}

//绑定并显示模型
rivets.bind($("#detail"), {
  label: label
});

html 代码：

<section id="detail">
  <button rv-color="label.color">{label.name}</button>
</section>

运行结果如下：

2，双向绑定器

双向绑定器除了可以在模型属性更改（模型到视图）时更新 DOM，也可以在用户与 DOM 进行交互时更新模型，例如更新控制输入，单击元素或与第三方组件交互。

为了让用户与 DOM 交互时能更新模型，我们需要告诉 Rivets.js 如何绑定和取消绑定该 DOM 元素设置模型的值。双向绑定器不是将绑定器定义为单个函数，而是定义为包含一些额外函数的对象。

（1）下面是一个简单的样例

rivets.binders['mobi-calendar'] = {
    bind: function(el) {
        var opts = {};
        opts.onSet = this.publish;

        this.mobiScrollInstance = mobiscroll.calendar(el, opts);
    },

    unbind: function(el) {
        this.mobiScrollInstance.destroy();
    },

    routine: function(el, value) {
        if (value) {
            this.mobiScrollInstance.setVal(new Date(value), true);  
        }
    },

    getValue : function(el) {
        return new Date(this.mobiScrollInstance.getVal()).getTime();    
    }
};

（2）对象中的各个方法介绍：

binder.bind：该方法将在初始化时被调用。使用它在绑定上存储一些初始状态，或在元素上设置任何事件监听器。
binder.unbind：该方法在被解除绑定时调用。用来重置元素上的任何状态，或取消在 binder.bind 函数中给元素设置的事件侦听器。
binder.routine：当观察到模型上的属性有更改并需要更新 DOM 时，会调用该函数。
binder.getValue：当绑定器想要设置模型上的值时，会调用该函数。此功能将 HTML 元素作为参数。
binder.publishes：如果要使 view.publish() 在这些绑定上调用 publish，将其设置为 true。
binder.block：阻止当前节点和子节点被解析（用于迭代绑定以及 if / unless 绑定器）。