• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序实现部分双向数据绑定(为input、picker、textarea编写统一的更新数据逻辑 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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)

具体行为可以查看我写的小程序:约会宝的个人信息填写页面




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap