微信开发入门第四章：文章列表页面

4.8 数据绑定

 4.8.1 数据绑定

        在真实的项目中，业务数据通常你放在自己的服务器中，然后通过HTTP访问服务器提供的API，从而实现数据获取。

代码清单 Js中的数据代码

Page({

  data:{
    object:{
    date:"Jan 14 2017",
    },
    title:"小时候的冰棍和雪糕",
    avatar:"/images/avatar/avatar-2.png",
    postImg:"/images/post/post-4.jpg",
    content:"冰棍儿和雪糕绝对不是一件东西，两者的价钱大不一样,......",
    collectNum:{array:[108]},
    messageNum:43,
    readingNum:34,
  }
     
}
)

 

将数据在视图层显示出来

<view class="post-container">
  <view class="post-author-date">
    <image src="{{avatar}}" ></image>
    <text> {{object.date}}</text>
  </view>
  <text class="post-title">{{title}}</text>
  <image class="post-image" src="{{postImg}}" mdoe="aspectFill"></image>
  <text class="post-content">{{content}}</text>
  <view class="post-like">
    <image src="/images/icon/wx_app_collected.png"></image>
    <text>{{collectNum.array[0]}}</text>
    <image src="/images/icon/wx_app_message.png"></image>
    <text>{{messageNum}}</text>
    <image src="/images/icon/wx_app_view.png"></image>
    <text>{{readingNum}}</text>
  </view>
</view>

4.8.2 查看数据绑定对象

当遇到数据显示不清的问题，可以打开AppData页面，查看情况。

4.8.3 数据绑定更新

        还可以使用setDa函数来做数据绑定，这种方法还可以看作数据更新，setData方法位于Page对象的原型链上，大多数情况下，我们是使用this.setData的方式来调用这个方法。

        setData的对象将接受一个参数，以key和value的方式将this.data中的key对应的值设置成value.

更改后的post.js代码

Page({

    data:{ },
    onLoad:function(){
      var iceCreamData={
        object:{
          date: "Jan 14 2017",
        },
        title: "小时候的冰棍和雪糕",
        avatar: "/images/avatar/avatar-2.png",
        postImg: "/images/post/post-4.jpg",
        content: "冰棍儿和雪糕绝对不是一件东西，两者的价钱大不一样,......",
        collectNum: { array: [108] },
        messageNum: 43,
        readingNum: 34,
      }
      this.setData({
        postData:iceCreamData
        
        })
    }
         
})
          
    

正如代码所示，this.setData指定的key就为PostData,value是文章的数据iceCreamData。

视图层代码post.wxml

<view class="post-container">
  <view class="post-author-date">
    <image src="{{postData.avatar}}" ></image>
    <text> {{postData.object.date}}</text>
  </view>
  <text class="post-title">{{postData.title}}</text>
  <image class="post-image" src="{{postData.postImg}}" mdoe="aspectFill"></image>
  <text class="post-content">{{postData.content}}</text>
  <view class="post-like">
    <image src="/images/icon/wx_app_collected.png"></image>
    <text>{{postData.collectNum.array[0]}}</text>
    <image src="/images/icon/wx_app_message.png"></image>
    <text>{{pataData.messageNum}}</text>
    <image src="/images/icon/wx_app_view.png"></image>
    <text>{{pataData.readingNum}}</text>
  </view>
</view>

如果页面空白没有错误信息，多半是数据绑定出了问题，这个时候AppData的面板是最好的调试工具。