小程序开发

在小程序原生开发中实现双向数据绑定的三大主要步骤

编辑时间:2019-09-06 11:59  浏览次数:浏览次数
对于刚开始进行小程序开发的开发者来说,总会遇到各种问题,对于那些没有接触过MVVM开发模式的人来说,小程序没有节点操作会让他们感觉非常不便,而对于其他接触过MVVM开发模式的开发者来说,小程序原生开发没有双向绑定的能力也让他们感觉到不方便。下面我就给大家介绍一下,在小程序原生开发过程中通过封装实现双向数据绑定的步骤。

在小程序原生开发过程中通过封装实现双向数据绑定的步骤有那些?

小程序原生开发 在小程序原生开发过程中,想要通过封装实现双向数据绑定,比较关键的步骤有以下这几个:

1.通过事件触发携带参数
在小程序的大多数组件绑定的事件中,参数被传递回后台。 例如,bindinput输入绑定事件的最常见组件如下所述。 实际操作,以找出将在此处返回的内容。

WXML: 正常输入 JS: GETVAL(E){ CONSOLE.LOG(E) }

当我们输入内容时,它将触发事件绑定的方法。 进行打印的结果是我们输入的内容都显示在e.detail.value上。 这个detail还顺带着把光标的位置和最后一个keyCode给带过来了。 这是小程序中的input取值方法。

那么在取值后如何为它分配变量呢?

如果只是简单的使用setData,那么就跳坑了,因为变量写死在里面,就等于说我们每次在输入的时候,都必须创建一个新的方法来赋值,这太烦人了。 所以我们需要进一步挖掘。

2.自定义属性data-*
事实上,小程序还为开发者提供了可以自定义的属性[data- *]。 许多新手会忽视甚至知道有这样的事情。 实际上,这是我们实现双向绑定的工具。 

<label>普通输入</label>

<input bindinput="getVal" data-name="a"></input> 

WXML: 正常输入 Js仍然与上面相同,打印print事件返回的参数,,data-name设置的数值a也随着事件在e.currentTarget.dataset中返回。

之后再用JS处理事件带回的内容:

GETVAL(E){ 设name = e.currentTarget.dataset.name 设value = e.detail.value this.setData({ [name]:value }) //打印出整个data,看效果如何

CONSOLE.LOG(this.data) }

WXML提供了多个页面绑定:

<label>普通输入</label>
<input bindinput="getVal" data-name="a">
</input> <text>{{a}}</text>

执行之后就可以实现双向绑定了。

3.绑定变量
data-*自定义属性,除了可以用来绑定字符串以外,还可以绑定变量,例如页面上wx:for迭代出来的index,或是Page里面设置的其它变量。因此如果输入的内容更新的是数组的时候,可以多设一个data-index去绑定数组下标,传回去,在JS上拿到后做相应处理后,再更新到目标数组中相应位置的值。

本文地址:https://www.webbj.cn/android/faq1948.html

上一篇:你必须了解的四种混合app开发方式
下一篇:没有了
免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
010-69759765186-1139-1767