模板渲染问题

Question

 <view class="movie-container">

      <block wx:for="{{movies}}">

        <template is="movieTpl" data="{{...item}}" />

      </block>

    </view>

在用模板渲染豆瓣电影数据的时候，如果我点击编译的话，页面就无法加载，就会包item undefined这个错误，但是如果我用Ctrl+S快捷键的话，页面就渲染出来了，但还是包item undefined这个错误，我查了item就是我代码里面这个，我改成其他变量如movie 就会报movie undefined这个错误。

后面我尝试了把{{...intheaters}}传入数据的地方改成{{inTheaters}}不让数据展开，就不会报这个错误了，老师这是什么原因

Answer 1

7七月 2016-12-17 16:09:00

我不信~，你把代码打包 群里发给我

Answer 2

7七月 2016-12-17 16:05:24

不报错，并不代表你的代码就没错。

Answer 3

7七月 2016-12-17 16:05:01

那你ctrl +S ，虽然没报错，但运行结果正确吗

• 提问者 皮皮时光机 #1

  正常运行，页面渲染也正确，但点击编译就出问题

Answer 4

7七月 2016-12-17 15:47:22

之所以要用3个点展开，是为了将对象平铺，这个在课程里也讲过了。这样做是为了避免在模板里面写item.a,imte.b这样的写法。展开后直接在模板里可以写{{ a} }

{{ b} }这样的数据绑定。如果报这个错误，我建议你在appdata的pannel下面看一下，当前绑定到data变量的到底是什么js对象，如果展开的话，模板里会不会有问题。

你没有跟着教程做吗？建议还是先跟着教程做一遍，学完一个章节再回过头来，更改。

• 提问者 皮皮时光机 #1

  老师，我知道3个点的作用，现在的问题是如果我用Ctrl+S保存代码方式运行的话，页面完全OK，但是如果我点击编译按钮的话就会出现错误了，这里我不能上传截图，我把截图放在我下面一个回复里

• 提问者 皮皮时光机 #2

  老师，这个编辑器无法上传图片，囧

Answer 5

php_go 2017-03-14 11:14:29

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

Answer 6

wang_hao__ 2016-12-29 23:14:17

七月老师？按视频操作，运行正常，但是出现上图错误，和皮皮时光机的问题有点类似，求教，感谢！

相关代码如下：

movies.js代码

var app =getApp();
Page({
    data:{
        
    },

    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', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          header: {
              "content-type":"json"
          }, 
          success: function(res){
            // success
            console.log(res);
            that.processDoubanData(res.data,settedKey);
          },
          fail: function() {
            // fail
          }
        })
    },

    processDoubanData:function(moviesDouban,settedKey){
        var movies = [];
        for(var i=0,movsubs=moviesDouban.subjects;i<movsubs.length;i++){
            var subject = movsubs[i];
            var title = subject.title;
            if(title.length >= 0){
                title = title.substring(0,6) + "...";
            }
            var temp = {
                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);
        
    }
})

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>

movie-list-template.wxml代码

<import src="../movie/movie-template.wxml" />
<template name="movieListTemplate">
  <view class="movie-list-container">
    <view class="inner-container">
      <view class="movie-head">
        <text class="slogan">正在热映</text>
        <view class="more">
          <text class="more-text">更多</text>
          <image class="more-img" src="/images/icon/arrow-right.png"></image>
        </view>
      </view>
      <view class="movies-container">
        <block wx:for="{{movies}}" wx:for-item="movie">
          <template is="movieTemplate" data="{{...movie}}" />
        </block>

      </view>
    </view>
  </view>
</template>

• 提问者 皮皮时光机 #1

  你把数据初始化一下comingSoon、inTheaters、top250这三个对象初始化了放在data里面。因为我们刚开始没有初始化，所以报错，但保存wxml后又动态setData，所以页面成功显示出来

• wang_hao__ 回复 提问者 皮皮时光机 #2

  恩恩对的，谢谢回复！开始以为三个放在data里没用，后来放进去发现没用错误提示了。

• wang_hao__ #3

  忘了说，搞了半天好浪费时间，等我知道原因了去看下一节，老师就说了这个问题。囧！

点开查看后面1条评论