微信小程序教程
9.4.1 概述
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

模板解析引擎 Mustache

概述

Mustache标签

Mustache模板

Mustache渲染上下文

mustache有一个渲染上下文栈的概念,在模板渲染的开始的时候,把数据源对象作为当前的渲染上下文 ,并压入上下文栈。

在遇到 {{#prop}} 标签的时候,如果prop引用的是一个对象或者是一个非空的对象数组,或者prop引用的是一个函数,并且这个函数返回的是一个对象或者是一个非空的对象数组,就会把这个对象或者数组的元素作为当前渲染上下文,并压入上下文栈,当这个标签渲染完毕的时候,才会把该上下文弹出,恢复上一层标签所使用的上下文。

由于{{#prop}}标签可以多层嵌套,所以在有的模板渲染的时候,会有多层上下文存在。mustache在解析标签时,根据标签名称查找当前上下文对象是否存在该属性,如果不存在就会到上层上下文对象中查找,只要在某一层找到,就会用该层上下文对象的值来渲染。如:

var template = "{{#person}}{{#student}}{{#address}}address: {{home}},age: {{age}}{{/address}}{{/student}}{{/person}}";
var data = { 
  age: 20,
  person: {
    student: {
      address: {
        home: 'xxxxx'
      }
    }
  }
};
var out = Mustache.render(template, data);
console.log(out);

在这个例子中,在渲染 {{#address}}{{/address}} 时,上下文对象已经变成了data.person.student.address 所引用的对象,所以 {{home}} 渲染时用到的就是data.person.student.address.home 属性,而 {{age}} 渲染时,由于data.person.student.address 不存在 age 属性,所以就会到上层上下文中查找,一直到data对象才找到,于是就把 data.age 当成了渲染结果。最终的输出结果为:

address: xxxxx,age: 20

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验