微信小程序 模板和列表渲染

今天在开发小程序的时候，需要实现一个列表文章，而且每个item的布局都一样，所以我用了模板来实现：

.wxml文件

<!--列表模板-->
     <template name="msgItem">
          <view class='content_head'>
            <view class='content_title'>
              <text>{{data_content_title}}</text>
            </view>
            <view class='author'>
              <text>Form:</text>
              <text>{{author}}</text>
            </view>
          </view>
          <view class='content_text'>
            <text >{{data_content_text}}</text>
          </view>
      </template>
      <!--循环输出列表-->
      <view class='content_item' wx:for="{{item_list}}">
        <template is="msgItem" data="{{...item}}"/>
      </view>

.js文件

 data: {
    item_list: [
      { 
        id: "1",
        data_content_title:"这里是标题1, 
        data_content_text: "这里是内容这里是内容这里是内容",
        author:"小华",
      },
      {
        id: "2",
        data_content_title: "这里是标题2",
        data_content_text: "这里是内容这里是内容这里是内里",
        author: "小明",
      },
    ] 
  } 

.wxss文件略

注意：

当使用模板时，要注意模板的作用域，开发文档中是这样说的：

模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

比如说：因为在列表渲染中，循环的是 data 中的 item_list 这个数组，所以，模板里所有的 {{xxx}} 的数据必须在data 里的item_list 数组里定义，否则模板读取不到数据。

 <view class='content_item' wx:for="{{item_list}}">

这样就可以实现列表的循环渲染了。

但是，坑来了！

当你对 data :{ } 里面其中一个元素进行重新赋值或者其它操作的时候，一般我们是这样提取出来的：

var ctitle = this.data.title;

但是数组中就不能这样，要数组加下标的格式：

var ctitle = this.data.item_list[0].title;

对数组的某个元素 setData 时也要加下标，并且要加单引号在外面：

this.setData({ 'item_list[0].title': "我是标题" })

最后，我趟过的坑希望你们能顺利跳过！！！有错误请指正！