Code example of Mustache syntax for WeChat applet development

Source: Internet
Author: User
Tags macbook
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!

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.