小程序 - template 模板化 获取本地数据

    /* 
        模板文件结构 
        template 只是一个占位符
    */
    <template name="postItem">
        <view class="post-container">
            <view class="post-author-date">
                <image src="avatar" class="post-author"></image>
                <text class="post-date">{{date}}</text>
            </view>
            <text class="post-title">{{title}}</text>
            <image src="{{imSrc}}" class="post-image"></image>
            <text class="post-content">{{content}}</text>
            <view class="post-like">
                <image src="../images/chat.png" class="post-like-img"></image>
                <text class="post-like-font">{{collection}}</text>
                <image src="../images/chat.png" class="post-like-img"></image>
                <text class="post-like-font">{{collection}}</text>          
            </view>
        </view>
    </template>

页面列表

    //引用模板页面的wxml
    <import src="../模板名称.wxml" />

    <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx" wx:key=" ">
        <view bindtap="onPostTap" data-postid="{{item.postid}}">
            <template is="postItem" data="{{...item}}" />
        </view>
    </block>
    /* 
        data-postid="{{item.postid}}" - 自定义属性绑定，获取数据中id绑定到view标签上
        dada="{{}}"-完成数据传递，需要用数据绑定方式，为什么？
        因为wx:for-item="item"中的item指代的是posts_key循环下的数组中的某一个子元素   */

    /* ...item 相当于是平铺展开posts_key数组中的数据对象，从而使template结构里不需要再写item.，就可以直接
        指定变量名了。 */

<-- ----------------------------------------------------------------------------------------- !-->

    //引用模板页面的js
    //完成数据绑定：
    var postsData = require('../data/post-data.js')
    Page({
        // data已初始化数据
        data:{
        },
        onLoad:function(){
            // 显式更新数据
            this.setData({
                posts_key:postsData.postList
            });
        }，
        // 点击获取到文章的id值，event默认事件对象
        onPostTap：function(event){
            var postId = event.currentTarget.dataset.postid;
            wx.navigeteTo({
                url: "../post/post-detail?id=" + postId
            })

        }
        /* 
        currentTarget - 当前鼠标点击
        dataset.postid - 获得所有自定义数据集合下的postid值
        */
    })

    /* postsData 接收本地数据中的javascript对象 */
    /* 所有小程序的数据绑定都是从data对象下读取它的属性值，从而完成数据绑定的。*/

    //本地数据库post.data.js文件
    var local-database = [
        {
            title: "",
            content: "",
            imgSrc: "",
            date: "",
            postid: "0"
        },
        {},
        {}.
    ],
    // 脚本文件定义出口
    module.exports = {
        // local-database 数组变量 赋值给 postList
        postList : local-database
    }

详情页面

    //详情页的数据也写在post-data.js本地数据中
    //详情页面，拿到相应的id,动态绑定数据
    var postsData = require("../../data/post-data.js")
    Page({
        data：{},
        onLoad:function(option){
            // 这里的id对应页面列表js中的id值
            var postId = option.id;
            var postDatas = postsData.postList[postId];  // postList 是一个数组，postDatas拿到数据
            //绑定数据，把postDatas放入到数据绑定变量（data）中
            this.data.postDatas = postDatas;
        }，
        /* 
        分析：
            1、详情页面结构中要加 postData对象,不然数据不能完整显示 ，如{{postData.title}}， 为什么？
                因为值并不是直接赋值到data中，把javascript对象用 postDatas变量名表示之后，
            用作为data的一个属性放在这里，所以前面要加上postDatas
            -
            2、如果在onLoad方法中，不是异步的去执行一个数据绑定，则不需要使用this.setData方法，
            只需要对this.data赋值即可实现数据绑定！ 为什么？
                异步方法是无法保证this.data这一段代码的执行是在onLoad方法之前发生的，有可能
            this.data还没执行，onLoad就就执行完了。而同步代码this.data则不会出现这个情况！
            - 生命周期  
            - 
            - 涉及数据绑定的都可用this.setData方法来做数据绑定
            - 运用AppData观察数据显示情况
        */
    })