小程序开发八：动态首页Home的数据绑定

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

传送门：

---

本节知识重点：

数据绑定

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

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

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

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

  }, 
})

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

修改前：

...
名字//假数据,直接写死
...

修改后：

...
//读取js文件中的nickName数据，动态显示
{{nickName}}
...

编译之后：

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修改如下：

    
      
      
        {{nickName}}
        {{postDate}}
      
      
    

    {{content}}

    

    
      
      {{likeCount}}
      
      {{commentCount}}
    

    

  

编译运行：

image.png

总结

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

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