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不同步!


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

  • 相关阅读:
    OpenGL红宝书例3.1 -- glBufferSubData使用
    JNI调用问题(部分机型崩溃)
    文件编码转换工具
    vs2013安装visual assist和viemu之后提示功能等无效解决
    cocos2d-lua SDK接入
    OpenGL中shader读取实现
    CURL C++网络延时或者最低网速下载设置
    Spring框架
    软件安装方式
    Web前端常见问题
  • 原文地址:https://www.cnblogs.com/guxin/p/weixin-miniapp-how-to-set-page-data.html
Copyright © 2011-2022 走看看