"JAVA applet real" elaborate applets view of data binding (13)

In the previous section which in fact have to understand the data binding, in the old iron to take that next data binding, look at all aspects of how it's implemented. Source: https: //github.com/limingios/wxProgram.git in No.8

Data binding applet

1. JQuery dom operation selector $

2. Small micro-channel program through a data binding vue / react

3. .js by data objects bound {{data}} of elements .wxml -> Mustache expression syntax
   

   Mustache is a classic template engine, front-end, back-end technology selection the previous separation of the following technical architecture, the front engine is a template that can be considered, along with the popular heavy-duty frame (AngularJS, ReactJS, Vue), the front-end templates technology has become something of a formal standard, Mustache's value lies in its stability and classic:
   Home: https://github.com/janl/mustache.js/
   document: https://mustache.github.io/mustache .5.html
   Mustache when in use, will appear on the page {{person}} this tag, when loaded back to show up, then immediately be replaced, this page is not enough to render friendly, which is a pain point I encountered during use.

4. The official explained
   

   https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

1. 演示绑定
   >* 数据绑定使用 Mustache 语法（双大括号）将变量包起来
   >* 关键字(需要在双引号之内)
   true：boolean 类型的 true，代表真值。
   false： boolean 类型的 false，代表假值。
   >* 可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
   三元运算
   算数运算
   逻辑判断
   字符串运算

dataBind.wxml

<!dataBind.wxml-->
<view class="container" id='item={{id}}'>
{{msg}}
<!-- 控制属性(需要在双引号之内) 关键字(需要在双引号之内)-->
<checkbox checked="{{false}}"> </checkbox>
<checkbox checked="{{true}}"> </checkbox>
<checkbox checked="{{flag}}"> </checkbox>
<checkbox checked="{{unflag}}"> </checkbox>
<!-- 三目运算符-->
{{a+b==5?"是5":"不是5"}}
<!--算数运算-->
<view> {{a + b}} + {{c}} </view>
<!---字符串运算-->
<view> {{msg + hello + "test"}} </view>
<!---数字和字符串拼接-->
<view> {{a + b + "test"}} </view>
</view>

dataBind.js

//dataBind.js 
// Get Application Example 
const = getApp App () 

Page ({ 
  Data: { 
    MSG: "This is a MSG", 
    ID: 1001, 
    In Flag: to true, 
    unflag: to false, 
    A:. 1, 
    B:. 4 , 
    C:. 5, 
    Hello: "Hello" 
  } 

})