微信小程序教程
9.2.1 {{keyName}}
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

模板解析引擎 Mustache

概述

Mustache标签

mustache的核心是标签和logic-less。从前面的代码中可以看到,在定义模板时,使用了 {{name}} 这样的标记。这就是mustache的标签,只不过它用 {{}} 替代了<>,以免跟HTML标签的 <> 混淆。logic-less,可以翻译为轻逻辑,因为在定义模板时,不会用到if-else,也不会有循环式的编码,一切都用标签来解决,虽然它的标签非常简单,但却能应付所有的应用场景。

Mustache的标签很简单,就那么几个:

  • {{keyName}}
  • {{#keyName}} {{/keyName}}
  • {{^keyName}} {{/keyName}}
  • {{.}}
  • {{>partials}}
  • {{{keyName}}}
  • {{!comments}}

{{keyName}}

{{keyName}} 标签是mustache模板里用的最多的,花括号里的 keyName 表示键名。这个标签的作用,是将数据源对象上 keyName 属性对应的值,转换成字符串进行输出。渲染规则为:

1)如果 keyName属性对应的值是一个简单的字符串,则直接把 keyName 引用的值转成字符串作为渲染结果。如:

var data = { "name": "waibo.wang" };
var out = Mustache.render("Welcome to {{name}}.", data);
console.log(out);

输出结果为:

Welcome to waibo.wang.

当然,这种方式也适用于对象。如果是对象,就需要使用 . 操作来把 keyName 引用的值转成字符串作为渲染结果。如:

var data = {
  "name" : {
    "first" : "Chen",
    "last" : "Jackson"
  },
  "age" : 18
};
var out = Mustache.render("name:{{name.first}} {{name.last}},age:{{age}}", data);
console.log(out);

输出结果为:

name:Chen Jackson,age:18

2)如果keyName 引用的值是空字符串、null、undefined、空数组,则渲染成一个空字符串。如,以下渲染结果都是空字符串:

var template = "{{-prop-}}";
Mustache.parse(template);
console.log(Mustache.render(template , {prop: ''}));         //--
console.log(Mustache.render(template , {prop: null}));       //--
console.log(Mustache.render(template , {prop: undefined}))  //--
console.log(Mustache.render(template , {prop: []}));         //--

3)如果keyName 引用的值是布尔值、NaN、0、数字,则渲染结果是把它作为一个字符串原样输出。如:

var template = "{{-prop-}}";
Mustache.parse(template);
console.log(Mustache.render(template , {prop: true}));    //-true-
console.log(Mustache.render(template , {prop: false}));   //-false-
console.log(Mustache.render(template , {prop: NaN}));   //-NaN-
console.log(Mustache.render(template , {prop: 0}));      //-0-
console.log(Mustache.render(template , {prop: 1.2}));     //-1.2-

4)如果keyName 引用的是一个函数,则在渲染时自动执行这个函数,并把这个函数的返回值作为渲染结果,假如这个返回值为空字符串、null、undefined、空数组,那么渲染结果仍然为空串,否则把返回值转成字符串作为渲染结果(注意最后一个用例,直接把函数代码渲染出来了)如:

//测试function
console.log(Mustache.render(template , {
  prop: function () {
  }
}));//--
console.log(Mustache.render(template , {
  prop: function () {
    return 'it\'s a fun'
  }
}));//-it's a fun-
console.log(Mustache.render(template , {
  prop: function () {
    return false;
  }
}));//-false-
console.log(Mustache.render(template , {
  prop: function(){
    return function (text, render) {
      return "<b>" + render(text) + "</b>"
    };
  }
}));
//-function (text, render) {
//   return &quot;&lt;b&gt;&quot; + render(text) + &quot;&lt;/b&gt;&quot;
//}-

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验