Code example of Mustache syntax for WeChat applet development

The Mustache syntax in wxml in the applet cannot be ignored, which makes the front-end iOS awesome... I checked it online... Record it. The Mustache syntax in wxml in the applet cannot be ignored, which makes the front-end iOS awesome... I checked it online... Record it.

What is Mustache?

Mustache is a logic-less (light logic) template parsing engine. it is generated to separate the user interface from the business data (content). it can generate documents in a specific format, it is usually a standard HTML document. If you want to call different functions in the same template to render the screen, you can manually determine the input parameters when rendering the page.

For example, the code in wxml of a applet:

// Here {} is the Mustache syntax.
 
  
{UserInfo. nickName }}
 ,

The Mustache template syntax is very simple:

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

{KeyName}

Simple variable replacement: {name }}

Var data = {"name": "weChat"}; Mustache. render ("{name} is excellent.", data); weChat is excellent.

Variable contains html code,

For example:
,You can use {& name} var data = {"name ":"
WeChat
"}; Var output = Mustache. render (" {& name} is excellent. ", data); console. log (output); return:
WeChat
Is excellent. the returned result of removing "&" is escaped:
WeChat
Is excellent. In addition, you can use {} instead {{&}}.

If it is an object, its attributes can also be declared.

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

{# KeyName }}{{/keyName} starts with # and ends with/. it renders the block once or multiple times based on the key value in the current context. It has powerful functions and can also include functions similar to if and foreach.

Var data = {"stooges": [{"name": "Moe" },{ "name": "Larry" },{ "name": "Curly "}; var output = Mustache. render ("{{# stooges }}{Name }}", Data); console. log (output); return:Moe   Larry   Curly

{^ KeyName }}{{/keyName} exception output

This syntax is similar to {# keyName }}{{/keyName}. The difference is that it renders and outputs the block content only when the keyName value is null, undefined, or false. For example:

Var data = {"name ":"
WeChat
"}; Var tpl = '{^ nothing} will render this section {/nothing}' if the nothing key name is not found. var output = Mustache. render (tpl, data); return: If the nothing key name is not found, this section will be rendered.

{.} Indicates enumeration, which is used to output the entire array cyclically, for example:

Var data = {"product": ["Macbook", "iPhone", "iPod", "iPad"]} var tpl = '{{# product }}
{{.}}
{/Product} '; var html = Mustache. render (tpl, data); return:
Macbook
 
IPhone
 
IPod
 
IPad

{{! } Indicates a comment

{{! Note here }}

{{> Partials }}

Start with>. when the structure is complex, we can use this syntax to split the complex structure into several small submodules.

Var tpl = "{namme }}
 
 

  
  
{> Msg }}
 
 
"Var partials = {msg:" {{# msg }}
{Sex }}
{Age }}
{Hobit }}
{/Msg} var html = Mustache. render (tpl, data, partials); // output: xiaohua

{Data }}}

The output of {data} will be translated into other special characters. to ensure that the content is output as is, you can use {{{}}},

Var tpl = '{{# msg }}
{Age }}}
{/Msg} '// output:
22

So many small programs can be used. if you find anything else, update it...

The above is the details shared by the code example of Mustache syntax for applet development. For more information, see other related articles in the first PHP community!