慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-电影页面数据绑定（下）

电影页面数据绑定（下）

1.进入目录 pages/movies，修改文件 movies.js，根据不同settedKey输出不同数据

var app = getApp();
Page({
  data: {
    inTheaters: {},
    comingSoon: {},
    top250: {}
  },
  onLoad: function(event) {
    var inTheatersUrl = app.globalData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
    var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
    var top250Url = app.globalData.doubanBase + "v2/movie/top250" + "?start=0&count=3";
    this.getMovieListData(inTheatersUrl, "inTheaters");
    this.getMovieListData(comingSoonUrl, "comingSoon");
    this.getMovieListData(top250Url, "top250");
  },
  getMovieListData: function(url, settedKey) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function(res) {
        console.log(res);
        that.processDoubanData(res.data, settedKey);
      },
      fail: function(error) {
        console.log(error)
      },
    })
  },
  processDoubanData: function(moviesDouban, settedKey) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + '...';
      }
      var tmep = {
        title: title,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp);
    }
    var readyData = {};
    readyData[settedKey] = {
      movies:movies
    };
    this.setData(readyData);
  }
})

2.进入目录 pages/movies，修改文件 movies.wxml

<import src="movie-list/movie-list-template.wxml" />
<view class="container">
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...inTheaters}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...top250}}" />
  </view>
</view>