微信小程序教程
9.2.4 {{#keyName}} {{/keyName}}
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

模板解析引擎 Mustache

概述

Mustache标签

{{{keyName}}}

{{&keyName}}

{{keyName}}

{{#keyName}} {{/keyName}}

以 # 开始、以 / 结束表示区块,它会根据当前上下文中的键值,来对区块进行一次或多次渲染。如:

var data = {
  "name": " xiaohua ",
  "profile": {
    "sex": " female ",
    "age": " 22 ",
    "hobit": " reading "
  }
};
var out = Mustache.render("{{name}}:{{#profile}}{{sex}},{{age}},{{hobit}}{{/profile}}", data);
console.log(out);

输出结果为:

xiaohua : female , 22 , reading

事实上,{{#keyName}} {{/keyName}} 的功能非常强大,它还具有类似if-else、for-each的功能,还可以进行动态渲染:

1)if-else功能

只有在数据源对象上存在 keyName 属性,并且它的值不是 null、undefined、NaN、0、false、空字符串,并且数组不为空的情况下,才会被渲染;否则渲染结果为一个空字符串,将不会输出任何内容。

假如使用以下模板:

var template = "{{name}}";

下面所有的渲染结果都为空字符串,不会输出任何内容:

//测试falsy值
console.log(Mustache.render(template , {name: ''}));
console.log(Mustache.render(template , {name: 0}));
console.log(Mustache.render(template , {name: null}));
console.log(Mustache.render(template , {name: undefined}));
console.log(Mustache.render(template , {name: false}));
console.log(Mustache.render(template , {name: NaN}));
//测试空数组
console.log(Mustache.render(template , {name: []}));
//测试不存在的属性
console.log(Mustache.render(template , {name2: true}));

除此之外,假如 keyName 引用的是一个函数,则 {{#keyName }} 会自动调用这个函数,并把函数的返回值作为 if-else 渲染逻辑的判断依据。

如果这个函数返回的是null、undefined、NaN、0、false、空字符串、空数组的话,渲染结果也是一个空字符串。因此,下面所有的渲染结果都为空字符串,不会输出任何内容:

console.log(Mustache.render(template , {
  name: function () {
  }
}));
console.log(Mustache.render(template , {
  name: function () {
      return false;
  }
}));
console.log(Mustache.render(template , {
  name: function() {
      return [];
  }
}));

2)for-each功能

如果 keyName 引用的是一个非空数组,则会根据数组大小进行迭代。如,以下代码可以遍历整个数组,并输出数组的所有元素:

var data = {
 "sites" : [ {
   "name" : "waibo.wang"
 }, {
   "name" : "yanxin.wang"
 }, {
   "name" : "maifang51.com"
 } ]
};
var out = Mustache.render("{{#sites}}{{name}}{{/sites}}", data);
console.log(out);

输出结果为:

waibo.wang
yanxin.wang
maifang51.com

3)动态渲染

当 keyName属性所引用的是一个函数,并且这个函数的返回值也是一个函数的话,mustache会再次调用这个返回的函数,并给它传递2个参数:text表示原来的模板内容,render表示mustache内部的执行渲染的对象,以便在这个函数内部可以通过这render对象,结合原来的模板内容,自定义渲染的逻辑,并把函数的返回值作为渲染结果(这个返回值渲染的逻辑跟 {{keyName}} 标签完全一样)。如:

var template = "{{#name}}content{{/name}}";
console.log(Mustache.render(template, {
  name: function(){
    return function (text, render) {
      return "<b>" + render(text) + "</b>"
    };
  }
}));

输出结果为:

<b>content</b>

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验