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


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

  • 相关阅读:
    C#学习笔记之——矩形覆盖问题
    链表,栈,队列代码
    链表练习代码
    2012年全国计算机专业大学排名
    寄存器介绍
    win8 wifi开关显示关闭,且设置里面wifi开关显示灰色的解决办法
    360随身wifi无法使用临时解决方案大全
    锐捷客户端的校园网电脑如何转化成无线路由
    未完成数据结构题目
    数据结构代码1
  • 原文地址:https://www.cnblogs.com/guxin/p/weixin-miniapp-how-to-set-page-data.html
Copyright © 2011-2022 走看看