zoukankan      html  css  js  c++  java
  • 【微信小程序】数据与界面UI不同步,不能直接操作Page.data

    问题:数据层与UI不同步

    微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层与UI不同步的情况。

    查看官方文档Q&A,第一项就是该问题的说明,不能直接操作Page.data!需要改用Page.setData来修改数据,才能同步到UI!

    另外w3cschool的教程中,对UI与数据源的绑定,Page.setData的使用也有一个很好的例子。

    https://www.w3cschool.cn/weixinapp/weixinapp-page.html 直接搜setData。

    示例代码:

    UI层index.wxml

    <!--index.wxml-->
    <view>{{text}}</view>
    <button bindtap="changeText"> Change normal data </button>
    <view>{{num}}</view>
    <button bindtap="changeNum"> Change normal num </button>
    <view>{{array[0].text}}</view>
    <button bindtap="changeItemInArray"> Change Array data </button>
    <view>{{object.text}}</view>
    <button bindtap="changeItemInObject"> Change Object data </button>
    <view>{{newField.text}}</view>
    <button bindtap="addNewField"> Add new data </button>

    逻辑层index.js

    //index.js
    Page({
      data: {
        text: 'init data',
        num: 0,
        array: [{text: 'init data'}],
        object: {
          text: 'init data'
        }
      },
      changeText: function() {
        // this.data.text = 'changed data'  // bad, it can not work
        this.setData({
          text: 'changed data'
        })
      },
      changeNum: function() {
        this.data.num = 1
        this.setData({
          num: this.data.num
        })
      },
      changeItemInArray: function() {
        // you can use this way to modify a danamic data path
        this.setData({
          'array[0].text':'changed data'
        })
      },
      changeItemInObject: function(){
        this.setData({
          'object.text': 'changed data'
        });
      },
      addNewField: function() {
        this.setData({
          'newField.text': 'new data'
        })
      }
    })

     注意其中的两行注释,直接操作this.data只会导致数据层与界面UI不同步!


    看来不能太想当然,还是要多看文档再动手啊。。。

  • 相关阅读:
    PHP 对Memcache的使用实例
    PHP Memcache 扩展安装
    Effective STL 读书笔记
    windows下安装和使用scrapy
    使用insert ignore来避免向数据库重复插入数据
    2017年末
    归并排序
    二叉树的中序遍历
    正则表达式
    tinymq学习小结
  • 原文地址:https://www.cnblogs.com/guxin/p/weixin-miniapp-how-to-set-page-data.html
Copyright © 2011-2022 走看看