微信小程序实现部分双向数据绑定(为input、picker、textarea编写统一的更新数据逻辑)
wepy开发小程序
以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量
<input type="text" value="{{inputdata}}"/>
data = {
inputdata: '数据'
}
当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata。
但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以编写一个程序来实现数据的绑定是大家都想实现的。
我实现的方法如下:
<input type="text" bindinput="inputeidt" data-obj="obj" data-item="item" value="{{obj.item}}"/>
inputeidt: function (e) {
let dataset = e.currentTarget.dataset
this[dataset.obj][dataset.item] = e.detail.value
}
这样当input中输入内容时,数据也会发生改变。
这时虽然能实现数据随着视图变化,但对于数据的结构过于局限,只能是obj:{item: ‘’} 这样的,如果是这样的:
moreinfo: {
title: '详细信息',
get: 'findDetailsByUserId',
save: 'saveDetails',
item: {
name: {
name: 'name',
title: '姓名',
type: 'input',
value: '',
placeholder: '请填写',
required: true
},
sex: {
name: 'sex',
title: '性别',
type: 'picker',
value: '',
placeholder: '请选择',
required: true,
range: [
{
id: 1,
name: '男'
},
{
id: 2,
name: '女'
}
]
}
}
}
绑定moreinfo.item.name.value就不行了, 我在解决时用了ES6的代理(写在onLoad中)
let self = this
self.saveinfo = new Proxy({}, {
set: function (target, key, value, receiver) {
// 给saveinfo中属性赋值前,可以令程序执行其他功能
self.moreinfo.item[key].value = value
return Reflect.set(target, key, value, receiver)
}
})
项目中input是遍历出来的,遍历moreinfo.item
<input type="text" wx:if="{{item.type === 'input'}}" bindinput="inputeidt" data-obj="saveinfo" data-item="{{item.name}}" value="{{item.value}}"/>
这样就实现了。上面的js要写在onLoad中,如果在data中写的话,会发生问题,当页面第二次打开时,saveinfo便不再是代理,而变成了{},结果便不能正常改变数据的值。
使用bindinput而不用bindblur是因为点击其他元素后,input失去焦点,是会先触发点击事件,才触发失去焦点事件。这样点击保存按钮,就会先保存,后更改数据,使得数据没有更改,所以使用bindinput,但使用bindinput可能性能不好。
使用bindblur的话,点击保存按钮保存数据的事件中一定要写一个延时来解决,setTimeout(() => {//上传保存逻辑}, 100)
具体行为可以查看我写的小程序:约会宝的个人信息填写页面
微信小程序实现部分双向数据绑定(为input、picker、textarea编写统一的更新数据逻辑)的更多相关文章
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 微信小程序开发之页面数据绑定
js:Page( { data:{ parmer:"", //字符串参数 userinfo:{ userphone:"", ...
- 微信小程序--问题汇总及详解之picker 增、删
<block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:f ...
- 解决微信小程序开发者工具输入框焦点问题
Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低.后来发现是Window10对笔记本高分屏支持不好,要DPI缩放,导致兼容性 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 微信小程序资料集合
一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- (二)校园信息通微信小程序从后台获取首页的数据笔记
在从后台获取数据之前,需要先搭建好本地服务器的环境. 确保Apache,MySql处于开启状态.下图为Apache,MySql处于开启时状态 然后进入后台管理平台进行字段和列表的定义 然后在后台添加数 ...
随机推荐
- springMVC01,使用xml
unit03_01 unit03_02 springmvc流程图 案例:hello示例 /hello.do --> springmvc --> /WEB-INF/hello.jsp /he ...
- phpcms 自定义方法
路径:\install_package\phpcms\libs\functions\extention.func.php <?php //输入栏目ID获取父级栏目名称 function catp ...
- jquery截取地址栏中url参数的值
<script> /*http://127.0.0.9/index.php?s=/Home/Index/fangguan_shuju&zc=2*/ function getQuer ...
- Python学习之旅(三十二)
Python基础知识(31):图形界面(Ⅱ) Python内置了turtle库,可以在计算机上绘图 运动控制: 1.画笔定位到坐标(x,y):turtle.goto(x,y) 2.向正方向运动 dis ...
- PM2.5环境检测系统的设计与分析
PM2.5环境检测系统的设计与分析 摘要: 大气颗粒物污染对人类健康和生态环境造成了很大的影响,这让人们逐渐重视起对细颗粒物PM2.5检测技术的研究.本文阐述了PM2.5浓度检测的五种方法,在对上 ...
- 创业维艰-->>书摘+乱七八糟
我把我的思路告诉了比尔:在不破产的情况下, 退出云计算服务的唯一办法是提高销售额, 因为即“即使我们将所有员工全部辞掉,如果销售额无法实现大幅增长的话, 基础设施成本依然会把我们逼上绝路.我进一步解释 ...
- Windows10远程桌面Ubuntu16.04
一.Ubuntu16.04端软件安装(管理员权限) 1.安装xrdp sudo apt-get install xrdp 2.安装vnc4server sudo apt-get install vnc ...
- JDBC事务(三)ThreadLocal绑定Connection
处理一个请求即开启一个线程,在三层中,执行三层中的方法都是用的同一个线程. 我们开启一个事务,使用conn.setAutoCommit(false); conn应该属于ado层,不应该出现在servi ...
- Pandas的可视化操作(利用pandas得到图表)
基本折线图 Series和DataFrame上的这个功能只是使用matplotlib库的plot()方法的简单包装实现. 举个例子 import pandas as pd import numpy a ...
- Apache 2.4.27外网访问403(Forbidden)错误
httpd.conf <Directory /> AllowOverride none #Require all denied 注释这句 Allow from all Require al ...