微信小程序入門到實戰（三）

數據綁定(二）

上一遍文章的結尾介紹了小程序簡單的數據綁定方式，可是核心要知道：數據綁定，都是借用data這個屬性做爲一箇中轉地，服務器上面獲取的數據，通過處理，使用this.setData()方法綁定到data屬性中的一個變量，在經過這個變量綁定到頁面上面。

接下來講一下數據綁定的其餘用途：

標籤的顯隱

前面說到，小程序裏面沒有dom的概念，就不能經過標籤的display和visibility屬性來控制，那怎麼控制呢？

在小程序裏面，對於一個標籤的屬性值是true / false的時候，在綁定數據的時候，就會對其中的數據進行布爾值的比較，有值就爲真，綁定的數據是false或者是空的時候就是假；

<swiper  wx:if='{{date}}'  catchtap='onSwiperTab' indicator-dots='{{date}}' vertical='{{false}}' autoplay='{{false}}' interval='5000'>
    <swiper-item>
      <image src='/images/post/bl.png' data-postid='3'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/xiaolong.jpg' data-postid='2'></image>
    </swiper-item>
  </swiper>

就拿前面說的輪播組件來講，當我在對應的頁面data屬性裏面設置date的值的時候，只要不爲空或者false，那麼swiper中的兩個經過綁定數據的方式設置屬性值的屬性，其屬性值就都會被解析爲true。那個直接設置false的autoplay屬性就不會自動輪播。

注意那個wx:if='{{date}} '，纔是控制標籤顯示和隱藏的關鍵。若是date是真，那麼wx:if='{{date}} '結果爲真，就會顯示輪播組件，若是date是假，那麼wx:if='{{date}} '結果爲假，就會隱藏輪播組件

圖片的切換

一般咱們作圖片的切換，通常是經過改變圖片的路徑來實現；在小程序裏面可使用if else動態的控制圖片的切換。

相似上面說的控制標籤的顯示和隱藏，也要使用到數據綁定：

<view class='circle-img'>
      <image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image>
      <image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>
      <image catchtap='onShareTap' class='share-img' src='/images/icon/share.png'></image>
 </view>

上面代碼裏面，只顯示兩張圖片，經過collected這個從服務器傳過來的標識，來判斷是顯示wx:if='ture'的圖片，仍是顯示wx:else的圖片，二者選其一，很方便的控制了圖片的切換。

數據的循環

一般編寫頁面的時候，想把相同的區域呈現屢次，又不想編寫冗餘的代碼，小程序裏面經過一個屬性：wx:for='{{數據源}}'

<view wx:for='{{datesArry}}' wx:for-item='item' wx:for-index='idx'>
  <view catch:tap='onBind'>{{item.date}}</view>
  <view catch:tap='onBind'>{{item.title}}</view>
  <view catch:tap='onBind'>{{item.content}}</view>
</view>

// Page頁面中的數據源
    onLoad: function (options) {
    var datasArr = [{
      date: '2018/2/3',
      title: '神盾局特工1',
      content: '神盾局特工這個禮拜六停播，說好的不冬歇的呢？'
    }, {
      date: '2018/2/3',
      title: '神盾局特工2',
      content: '神盾局特工科學組CP要結婚啦!'
    }]
    this.setData({ datesArry: datasArr })
    // this.setData(datasArr)   setData 方法接收的是一個對象，而不是數組
  }

咱們把要呈現屢次的區塊，用一個標籤包裹view / block，而後在其上面做用於wx:for屬性，接收一個數組或者集合的數據，datesArry就是要循環的數據數組，wx:for-item='item' wx:for-index='idx'中的item是被循環的子對象，idx是對應子對象在數據數組裏面的索引位置；這兩個值都默認是有的，即便不寫。

前面也說道過，this.setData()方法是把裏面接收到的數據，綁定到Page下面的data屬性裏面，而後在展現在頁面中，小程序的數據綁定，都是從Page中的data屬性中讀取數據去完成數據綁定。這個讀取data屬性中的數據去綁定到頁面的動做是發生在onLoad事件以後的。

既然這麼說的話，那麼可不能夠直接給data對象身上直接添加屬性，而且直接賦值：this.data.datesArry=datasArr ，這樣是綁定不了數據到頁面上，雖然不會報錯，小程序的前期版本里面是能夠這樣綁定數據的。因此都建議使用this.setData()方法去主動更新數據。

要是數據是存放在其餘的文件夾下面，應該怎麼樣讀取呢？在數據文件中，經過拋出一個數據出口，來經過其餘文件進行訪問：

module.exports = {
    postList: dataBase  // 數據數組的名字  
}

在要使用數據的js文件下，引入要使用數據的路徑，應該在page外面引入：

var postsData = require('數據文件所在的路徑');

注意這個require中的路徑名是相對路徑，不能是絕對路徑。