上一节我们粗略地搭建了动态首页Home页面的布局，并且以假数据的形式来呈现

传送门：

---

本节知识重点：

数据绑定

上节课我们的动态列表页面，每条动态显示的内容，还有显示的个数，都是我们自己假定的数据，正确的填充应该是从服务器加载数据，根据服务器返回的内容来显示我们每条动态的内容和具体的个数；那么从服务器获得的数据又是如何加载到我们的页面上的呢，那么这里就提出来一个“数据绑定”的概念。

数据绑定：即在布局的同时，将内容动态地添加到预览的view视图中，只要所绑定的数据发生了改变，那么其view的内容将会发生改变；

首先我们先在home.js文件中，定义“nickName”的数据

Page({
  /**
   * 页面的初始数据
   */
  data: {
     nickName:"张三"
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }, 
})

并且将“nickName”的数据绑定到名字text上，修改home.wxml文件，

修改前：

...
<text class="userNick">名字</text>//假数据,直接写死
...

修改后：

...
//读取js文件中的nickName数据，动态显示
<text class="userNick">{{nickName}}</text>
...

编译之后：

image.png

我们轻松地将数据绑定到.wxml中的view上。

以此类推，我们将所有需要动态显示的内容，都绑定上js文件中的数据，home.js修改如下

 data: {
     nickName:"张三",
     avatar:"/images/home/avatar.png",
     postDate:"上午 19:21",
     content:"我是帖子的内容，虽然我是写死的,但我是从js文件中绑定显示的",
     contentImage:"/images/home/basePic2.jpg",
     isLiked:"false",
     likeCount:"3",
     commentCount:"4"
  },

home.wxml修改如下：

<view class="dynamicContainer">

    <view class="dynamicTopView">
      <image class="userAvatar" mode="aspectFill" src="{{avatar}}"></image>
      <view class="userNick-postDate">
        <text class="userNick">{{nickName}}</text>
        <text class="postDate">{{postDate}}</text>
      </view>
      <image src="/images/home/moreIcon.png" class="moreIcon"></image>
    </view>

    <text class="contentText"></text>{{content}}

    <image class="contentImg" mode="aspectFill" src="{{contentImage}}"></image>

    <view class="dynamicBottomView">
      <image class="favoriteIcon" src="/images/home/xin.png" mode="aspectFit"></image>
      <text class="favoriteCount">{{likeCount}}</text>
      <image class="commentIcon" src="/images/home/pinglun.png"></image>
      <text class="commentCount">{{commentCount}}</text>
    </view>

    <view class="bottomLine"></view>

  </view>


</view>

编译运行：

image.png

总结

以上我们虽然做了数据绑定，但依然显示的还是假数据，下一节我将从服务器请求数据来进行页面内容填充。

传送门：
九：动态首页Home的网络请求和数据加载