Rivets.js - 数据绑定和模板系统使用详解2（格式化器的使用、函数调用）

2017-06-28 发布：hangge 阅读：748

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

五、自定义格式化器（Formatters）

格式化器（Formatters）可以将绑定的输入、输出数据修改成对应格式的数据，我们可以用它来格式化显示日期，数字，货币等。

同时它们可以使用与 Unix pipeline 类似的方式工作，每个的输出直接输入到下一个输入，因此我们可以将多个格式化器堆叠在一起使用。

1，单向格式化器

（1）这里以实现一个日期格式化为例，用来将时间戳转换成年月日的形式显示。

//日期格式化显示（时间戳 -> 年月日）
rivets.formatters.date = function(value){
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return year + "-" + month + "-" + day;
}

（2）下面是测试样例，可以通过分隔符（|）将格式化器分配给相关的绑定

/********* 下面是js代码 ********/
//数据模型
var task = {
  name: "机房检修",
  startDate: 1402233167900
}

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

/********* 下面是html代码 ********/
<section id="detail">
  <span rv-text="task.startDate | date"></span>
</section>

（3）运行结果如下

2，格式化参数

格式化器可以接受任何数量的参数，参数可以是字符串，数字，布尔，null，undefined，或绑定的数据。

（1）下面对日期格式化器做个修改，增加两个参数。让用户可以自定义日期分隔符，以及结尾文字。

//日期格式化显示（时间戳 -> 年月日）
rivets.formatters.date = function(value, separatir, end){
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return year + separatir + month + separatir + day + end;
}

（2）下面是测试样例，在格式化器后紧跟着参数

/********* 下面是js代码 ********/
//数据模型
var task = {
  name: "机房检修",
  startDate: 1402233167900
}

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

/********* 下面是html代码 ********/
<section id="detail">
  <span rv-text="task.startDate | date '/' task.name"></span>
</section>

（3）运行结果如下

3，双向格式化器

（1）如果我们要以特定格式存储值，可以使用双向格式化器实现。下面实现一个货币金额格式化器：

代码中货币金额使用分为单位进行存储。
显示时使用元为单位，小数点后保留两位。
当设置模型值时（修改输入内容），将输入自动舍入到两位小数，并以分为单位存储。

//货币值格式化器（显示：单位元，保留两位小数。存储：单位分）
rivets.formatters.currency = {
  read: function(value) {
    return (value / 100).toFixed(2)
  },
  publish: function(value) {
    return Math.round(parseFloat(value) * 100)
  }
}

（2）下面是测试样例。

/********* 下面是js代码 ********/
//数据模型
var item = {
  price: 8820,
}
 
//绑定并显示模型
rivets.bind($("#detail"), {
  item: item
});
 
/********* 下面是html代码 ********/
<section id="detail">
  <input rv-value="item.price | currency">
</section>

（3）运行结果如下

六、函数调用

Rivets.js 提供了一个特殊的格式化器（call），用于在表达式中调用函数。下面通过样例做演示。

1，调用不带参数的方法

（1）这里实现一个简单的绑定方法，调用后返回一个字符串。

/********* 下面是js代码 ********/
//绑定的方法
var event = {
  hello: hello
}

function hello(){
  return "欢迎访问 hangge.com";
}

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

/********* 下面是html代码 ********/
<section id="detail">
  <span rv-text="event.hello | call"></span>
</section>

（2）运行结果如下

2，调用带参数的方法

（1）下面对前面的方法做个修改，增加 1 个参数。

这个参数数量不定，可以是字符串，数字，布尔，null，undefined，或绑定的数据。
在表达式中将参数跟在 call 关键子后面即可。
任何参数值的变化都会触发函数的重新调用。

/********* 下面是js代码 ********/
//数据模型
var data = {
  name: "航歌",
  site: "hangge.com"
}

//绑定的方法
var event = {
  hello: hello
}

function hello(name){
  return "欢迎访问：" + name;
}


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

/********* 下面是html代码 ********/
<section id="detail">
  <span rv-text="event.hello | call data.name"></span>
</section>

（2）运行结果如下