JQuery模板 ：(七)JsRender中的转换器

阅读更多

一、什么是转换器？

       在JsRender中，转换器是一种方便的处理数据或者是格式化数据的快捷方式，也是一种评估表达式的结果的是重要方式。例如：

{{html:movie.description}} - 对数据进行Html的encode

{{url:getTheFilePath()}} - 对URL进行encode {{daymonth:invoice.date}} - 对日期进行格式化

在JsRender中，可以使用HTML-encode,attribute-encode,URL-encode.当然也可以注册自定义的converters（转换器）。

如果使用JsViews，还可以使用具有双向数据绑定功能的converters，这包括convert和convertBack(反转换器），其中每一个负责一个方向。

 

二、开始使用转换器。

1. 注册转换器：$.views.converters(name, converterFn)

   使用转换器：{{converterName: someExpression}} 

 

简单例子：将输入内容转化为大写的转换器：

$.views.converters("upper", function(val) {
  return val.toUpperCase();
});

{{upper: "upper case: " + nickname}}

 

实用自定义转换器的例子：

 

 

 

2. 在converter 的function中可以使用常用的参数和属性：

 

 其中：this.tagCtx.props.xxx用于访问该标签上的xxx属性，另外如果需要访问整个对象，可以使用：this.tagCtx.view.data

 

 

3. $.views.converters(namedConverters) ：用于注册多个转换器

$.views.converters({
  upper: function(val) {...},
  lower: function(val) {...}
});

 

4. $.views.converters(namedConverters[, parentTemplate])：如果传入的converters不是在全局注册的，那么该方法会为所指定的parentTemplate注册私有的转换器资源，即传入的转换器将会被注册成为parentTemplate的私有资源。

$.views.converters({
  upper: function(val) {...},
  lower: function(val) {...}
}, parentTemplate);

 

有用的实例：

 

实例1. 双向绑定和转换器的结合使用。

 

    
    
    




  
Data
DayOff
Choose day off
  


To edit, enter part of the name, or the number, or click here:
Change day

 

 

代码解读：

A、使用转换器来渲染标签：

1）HTML encoding，没有使用自定义的转换器

{{>dayOff}}

2) 渲染数据并转换成显示名：

{{intToDay:dayOff}}

 

B、使用具有数据绑定功能的converter和convertBack

1）动态绑定到数据，没有转换器：

 

2)   动态绑定到数据，并通过转换器转换显示名子：

 

3）双向的数据绑定将会在数据格式（integer）和显示的名字（text）之间做convert和convertBack,也将会使用tooltip来显示数据的值。

 

实例2：使用转换器绑定到表单元素：

 

    
    
    





Using convert and 'convert back'
  functions with integer-to-string conversion:
— Binding to form elements, but keeping the
  'amount' data as type 'number'



Choose amount:






Choose amount:



  0


  1


  2


  3


  4


  5


  6


  7



Choose amount:



  0
  1
  2
  3
  4
  5
  6
  7




Convert and 'convert back'
  functions using bit-masks on the integer data value:

Choose amount:


 bit 0

 bit 1

 bit 2



Amount: 

 

代码解读：注册了不同的convert和convertBack 转换器，然后使用下面的方式将form中的元素和数据进行了绑定：

  0
  ...


 bit 1

 

 

 

• wsheng-jstemplate.zip (148.5 KB)
• 下载次数: 11