数据如何响应到视图

如今，双向数据绑定&单向数据流 已深入开发者日常，MVMM 开发模式算是框架标配。

数据绑定、条件渲染、列表渲染 是如何书写的呢？

示例代码

小程序使用数据响应

  1. <!--wxml-->
  2. <view class="scroller-wrap">
  3.   <!--数据绑定-->
  4.   <view>{{message}}</view>
  5.   <!--条件渲染-->
  6.   <view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
  7.   <view wx:elif="{{view == 'APP'}}">APP</view>
  8.   <view wx:else="{{view == 'MINA'}}">MINA</view>
  9.   <!--列表渲染-->
  10.   <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item"
  11.     >{{item}}</view
  12.   >
  13. </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     message: "Hello MINA!",
  5.     view: "MINA",
  6.     array: [1, 2, 3, 4, 5]
  7.   },
  8.   onLoad() {
  9.     this.setData({
  10.       message: "wx"
  11.     });
  12.   }
  13. });

cml 使用数据响应

  1. <template>
  2.   <!--index.cml-->
  3.   <view class="scroller-wrap">
  4.     <!--数据绑定-->
  5.     <view>{{message}}</view>
  6.     <!--条件渲染-->
  7.     <view c-if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
  8.     <view c-else-if="{{view == 'APP'}}">APP</view>
  9.     <view c-else="{{view == 'MINA'}}">MINA</view>
  10.     <!--列表渲染-->
  11.     <view c-for="{{array}}" c-for-index="index" c-for-item="item"
  12.       >{{item}}</view
  13.     >
  14.   </view>
  15. </template>
  16. <script>
  17.   class Index {
  18.     data = {
  19.       message: "Hello MINA!",
  20.       view: "MINA",
  21.       array: [1, 2, 3, 4, 5]
  22.     };
  24.     beforeCreate() {
  25.       this.message = "cml";
  26.     }
  27.   }
  28.   export default new Index();
  29. </script>

数据响应总结

cml运行时框架 提供了跨端响应式数据绑定系统(Data binding)，当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

只需要将 view<—>model 交互部分逻辑，作简单迁移，便可使它成为跨多端的数据响应系统。