WeChat applet's view layer WXML binds data, templates, logic...

The previous article introduced the MVC structure of the mini program:

page.js is the control layer (C), also called the business logic layer;

the data attribute in page.js, That is the data model layer (M);

page.wxml is the presentation layer (V);

page.wxss is the css, which enhances the presentation layer effect.

Modify the data attribute (M) through the business logic layer (C) and display it in the presentation layer (V).

That is the MVC design pattern.

1. Data binding

First look at the MVC process structure diagram of the Page

If a variable is defined in data, such as

Page({
    data:{
        title: '小程序实战教程',
        desc: '视图层—WXML'
    }
})

pass {{title}} in the page, The effect can be displayed, as shown in the following animation:

##2. Common syntax for data binding

##2.1, content

##89c662c6f8b87e82add978948dc499d2 {{ message }} de5f4c1163741e920c998275338d29b2

2.2, component attributes (need to be within double quotes)

Same as content

aaba81a7d774e6c2302573fd72615d5d de5f4c1163741e920c998275338d29b2

##2.3, control attribute

< ;view wx:if="{{condition}}"> de5f4c1163741e920c998275338d29b2

2.4, keyword (requires {{ } } within)

true: true of boolean type, representing true value.

false: false of boolean type, representing false value.

747f72a358121e7e841b6400bb3b0b1a 05746d9ee125ce13a8db285d2e718246

Note: Do not write checked="false" directly, its calculation The result is a string, converted to boolean type to represent a true value.

2.5, ternary operation

c0dc69f695518309bed4bf463f5a1280 Hidden de5f4c1163741e920c998275338d29b2

2.6, Arithmetic operations

89c662c6f8b87e82add978948dc499d2 {{a + b}} + { {c}} + d de5f4c1163741e920c998275338d29b2

##2.7, string operation

89c662c6f8b87e82add978948dc499d2{{" hello" + name}}de5f4c1163741e920c998275338d29b2

##2.8, data path operation

for For the object type, you can get the value through object.key;

For the array type, you can get the value through the subscript index, and the index starts from 0

89c662c6f8b87e82add978948dc499d2{{object. key}} {{array[0]}}de5f4c1163741e920c998275338d29b2

Code and renderings:

#3. Logical rendering syntax
3.1, logical judgment wx:if2428c98322da0786c26d2124ea16d07a 5}}"> de5f4c1163741e920c998275338d29b2

or

2428c98322da0786c26d2124ea16d07a 5}}"> 1 de5f4c1163741e920c998275338d29b2

0164e52f109e972e49b2f115709300d2 2}} "> 2 de5f4c1163741e920c998275338d29b2
a299c6007f65540f8bfc71911785b662 3 de5f4c1163741e920c998275338d29b2

##block wx:if

f18182654dad930a0dbecb3c65defe3f

89c662c6f8b87e82add978948dc499d2 view1 de5f4c1163741e920c998275338d29b2

89c662c6f8b87e82add978948dc499d2 view2 < ;/view>
36b196a5d42bcd29e331cb722979f9a6

##3.2, wx:for

default array The subscript variable name of the current item defaults to index, and the variable name of the current item in the array defaults to item. Can also be specified via wx:for-index and wx:for-item.

5c869cda098bfe168fa00e4ec7260a82
{{index}}: {{item.message}}

de5f4c1163741e920c998275338d29b2

Specify

f2c0af0185cd08902251c62e9f83c5fc
{{idx}}: {{itemName.message}}

de5f4c1163741e920c998275338d29b2

##block wx:for

992e0b80b16e293b90f2ddd5facc6985 89c662c6f8b87e82add978948dc499d2 {{ index}}: de5f4c1163741e920c998275338d29b2 89c662c6f8b87e82add978948dc499d2 {{item}} de5f4c1163741e920c998275338d29b2

36b196a5d42bcd29e331cb722979f9a6

3.3, wx:key

If the position of the items in the list will change dynamically or new items are added to the list, and you want the items in the list to maintain their own characteristics and status (such as < ;input/>'s input content, 698d939a2c9041f2302734cfeb04788e's selected state), you need to use wx:key to specify the unique identifier of the item in the list. The value of wx:key is provided in two forms

1) A string representing a property of the item in the array of the for loop, and the value of the property needs to be a list The only string or number in the string and cannot be changed dynamically.

2) The reserved keyword *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number

When data changes trigger the rendering layer to re-render, components with keys will be corrected. The framework will ensure that they are reordered rather than re-created to ensure that the components maintain their own state and improve the list rendering time. s efficiency.

##4efbab812d8ae77ecae34dc98dd67a03 {{item. id}} 4cfc40e017beed9e13939e19a179680a

See picture

4. Template

WXML provides templates (templates), which are called in different places. Achieve the effect of reuse.

By dcdc0fa59b5fea5bdae0d810c3919fcd tag:

Define template

Use the name attribute as the name of the template. Then define the code snippet inside dcdc0fa59b5fea5bdae0d810c3919fcd.

Use template

Use the is attribute to declare the template you need to use, and then pass in the data required by the template.

The code is as follows:

Definition template

5a18ce5877a3f2c9ea30dea7b9418106
89c662c6f8b87e82add978948dc499d2
28f128881ce1cdc57a572953e91f7d0f {{name}}: {{time}} 273e21371c5d5e701d3c98517a0bfa41
de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

Use templates (expand objects by...)

6d6d9088d69e7f145d664b900057c448

Note:

1) The is attribute can use Mustache syntax to dynamically determine which template needs to be rendered

2) The template has its own scope and can only use the data passed in by data.

##5. Data combination

It can also be combined directly within Mustache to form a new object or array.

data:{

tplItem:{

name:'My Template',
time:'2016-11-16'
}

}

##Array

a8ee55f2d0670b602d4eabef11d1ad2c {{item}} de5f4c1163741e920c998275338d29b2

##Object

f263b22c5e2723a694cd9d5e8aa7f5e2

21c97d3a051048b8e55e3c8f199a54b2

##You can also use the spread operator... to expand an object.

is to expand the attributes. The newly added attributes (such as time:2016-11-20) will overwrite the time of tplItem. cd6639d94ecc90523bf16797f2112208

21c97d3a051048b8e55e3c8f199a54b2

More WeChat applet view layer WXML binding data, templates, logic... Related Please pay attention to the PHP Chinese website for articles!