juicer.register注册函数/自定义函数(对象)

对源数据进行筛选/处理等;

引入文件

var juicer = require("juicer");

注册函数

function number_format(number, decimals, dec_point, thousands_sep) {
/*
* 参数说明:
* number:要格式化的数字
* decimals:保留几位小数
* dec_point:小数点符号
* thousands_sep:千分位符号
* */
number = (number + '').replace(/[^0-9+-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,

prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.floor(n * k) / k;
};
s = (prec ? toFixedFix(n, prec) : '' + Math.floor(n)).split('.');
var re = /(-?\d+)(\d{3})/;

while (re.test(s[0])) {
s[0] = s[0].replace(re, "$1" + sep + "$2");
}

if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
juicer.register('beautifyAmount',number_format);//注册函数,用的时候使用注册的beaytifyAmount这个函数;

模板渲染的用法

$listTable.find("tbody").empty().append(listTpl.render(data));

模板如下

var listTpl = juicer(['{@if count === 0}',
'<tr>',
'<td colspan="6" style="text-align:center">',
'暂无记录',
'</td>',
'</tr>',
'{@else}',

'{@each data as item,index}',
'<tr provincecode="${item.province_code}">',
' <th>${item.name}</th>',
' <th>${item.province_name}</th>',
' <td class=" wui-txt-tar">${item.sort}</td>',
' <td class=" wui-txt-tar"><span class="wui-txt-warning">${item.value[2]|beautifyAmount,"2",".",","}</span></td>',
' <td class=" wui-txt-tar"><span class="wui-txt-warning">${item.value[3]}</span></td>',
' <td class=" wui-txt-tar">',
' <span class="wui-txt-warning">${item.value[4]}</span>',
' </td>',
'</tr>',
'{@/each}', '{@/if}'].join(""));

核心用法

${item.value[2]|beautifyAmount,"2",".",","}

———————————-

循环数组,看下源代码

var listTpl = juicer([
'{@each data as item,index}',
' <div class="list-item ">',
' <span class="list-leftcon">${item.plugin_name}</span>',
' <div class="list-con">',
' <a href="${item.plugin_article}" target="_blank">使用总结</a>',
' {@if item.plugin_document}',
' {@each item.plugin_document as listItem,listIndex}',
' <a href="${listItem}" target="_blank" class="mui-txt-muted">参考${listIndex}</a>',
' {@/each}',
' {@/if}',
' </div>',
' <div class="list-arrow">',
' <a href="${item.plugin_official}" target="_blank">官网</a>',
' </div>',
' </div>',
'{@/each}'
].join(""));

var $page = $("#appPage");
var $resultArea = $page.find("#j-result-area");

var pluginsList=[
{
plugin_name:"juicer",
plugin_article:"https://zhubangbang.com/juicer-register-register-function-custom-function.html",
//plugin_document:["http://juicer.name/docs/docs_zh_cn.html","https://zhubangbang.com/charles","https://zhubangbang.com/about-me"],
plugin_official:"http://juicer.name/docs/docs_zh_cn.html"
},
{
plugin_name:"validate",
plugin_article:"https://zhubangbang.com/",
plugin_official:"https://jqueryvalidation.org/"
}
];

var pageUtility = {
init: function () {
this.initInfo();
},
initInfo: function () {
//var self = this;
$resultArea.empty().append(listTpl.render({data: pluginsList}));
}
};
pageUtility.init();

上面的

‘{@each data as item,index}’,

这里的data 对应的是{data:pluginsList}这个对象的data属性;

把他化妆成为了item和index;

使用的时候直接${item}就好;注意这里的抓换的时候,变量名不能【-】连接符

比如

{@each item.plugin_document as listItem,listIndex}

或者这样

{@each item.plugin_document as list_item,listIndex}

上面都是可以的;但是一定不能用下面这样【-】链接的

{@each item.plugin_document as list-item,listIndex}

参考网址

http://juicer.name/docs/docs_zh_cn.html

~

未经允许不得转载:朱邦邦的WEB前端开发博客 » juicer.register注册函数/自定义函数(对象)

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址