模板渲染问题

来源:20-14 电影页面数据绑定(下)

皮皮时光机

2016-12-17


 <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}}不让数据展开,就不会报这个错误了,老师这是什么原因

写回答

6回答

7七月

2016-12-17

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

0
0

7七月

2016-12-17

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

0
0

7七月

2016-12-17

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

0
1
皮皮时光机
正常运行,页面渲染也正确,但点击编译就出问题
2016-12-17
共1条回复

7七月

2016-12-17

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

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

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

0
2
皮皮时光机
老师,这个编辑器无法上传图片,囧
2016-12-17
共2条回复

php_go

2017-03-14

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

0
0

wang_hao__

2016-12-29

//szimg.mukewang.com/586526970001e44c13660736.jpg

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

相关代码如下:

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>


0
4
女神旭
我也是,,模拟上正常的渲染效果。真机上就不能运行
2017-09-28
共4条回复

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23955 学习 · 6928 问题

查看课程