「本当のJAVAアプレット」データバインディングの精巧なアプレットビュー(13)

実際にデータバインディングを理解する必要があり、前のセクションでは、次のデータを結合することを取るために古い鉄で、それが実現していますかのすべての側面を見てください。出典ます。https:第8号で//github.com/limingios/wxProgram.git

データバインディングアプレット

  1. jQueryのDOM操作セレクタ$

  2. データバインディングVUE介して小さなマイクロチャネル・プログラム/反応

  3. データオブジェクトでの.js要素の{{データ}}結合.wxml - >口ひげ式の構文

    口ひげは、以下の技術的なアーキテクチャの前の分離古典的なテンプレートエンジン、フロントエンド、バックエンドの技術選択で、フロントエンジン、フロントエンドテンプレート、人気の大型フレーム(AngularJS、ReactJS、ヴュー)と一緒に、考えることができるテンプレートです技術は正式な標準のようなものとなっている、口ひげの値は、その安定性にあるとクラシック:
    ホーム:https://github.com/janl/mustache.js/
    ドキュメント:https://mustache.github.io/mustache .5.html
    口ひげが使用時には、ページに表示されます{{人は}}このタグは、表示されるまで、バックロードされると、その後すぐに交換して、このページはある、優しいレンダリングするために十分ではありません痛みのポイントは、私が使用中に遭遇しました。

  4. 関係者は説明しました

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

image.png

  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 
//取得応用例
CONST = getAppアプリ()

ページ({ 
  データ:{ 
    MSG:、 "これはMSGが" 
    ID:1001と、
    フラグに:trueに
    falseに、:フラグ解除
    :. 1、
    B 4 :. 、
    C :. 5、
    ハロー"ハロー" 
  } 

})


おすすめ

転載: blog.51cto.com/12040702/2423464