美文网首页
小程序开发--伪双向绑定

小程序开发--伪双向绑定

作者: 君道 | 来源:发表于2017-11-09 23:07 被阅读0次

这篇帖子写给刚接触小程序的新手,希望在数据绑定方面给大家一点灵感,也欢迎大家积极的探讨更好的双向绑定思路。

废话不多说,先上代码吧

//小程序提供的事件比较匮乏,也可能是我文档看的比较糙,在输入方面,主要的两种情况如下
//一类是bindchange,一类是bindtap
<radio-group data-set='sex' bindchange='bindtap'>
    <label class='radio' wx:for='{{genders}}'>
        <radio value='{{item.name}}' checked='{{item.checked}}' />{{item.value}}
    </label>
</radio-group>

<checkbox data-set='bxy' bindtap='bindtap'></checkbox>
//通过给元素绑定一个data-set值,表明要修改的字段。


//两类事件获取最新值的方式存在一点差异。
//先取到要修改的key,再通过type判断根据哪种方式获取value
//通过setData方式更新数据,底层会把最新的数据渲染到视图。
//在大表单和数据关联复杂时,这种方式可以大大节省时间。
bindtap: function (e) {
        var key = e.currentTarget.dataset.set;
        if (e.type == 'tap') {
            var obj = {};
            obj['form.' + key] = !this.data.form[key];
            this.setData(obj);
        }
        if (e.type == 'change') {
            var obj = {};
            obj['form.' + key] = e.detail.value;
            this.setData(obj);
        }
    }

可以基于data自定义属性的方式,抽离封装更加通用的赋值函数,放在app.js中,全局引用。
最后基于 小程序5层页面限制,有设计或者实际开发经验丰富的小哥哥,小姐姐有好的navigateTo or redirectTo原则吗?
操作流程中navigateTo和redirectTo如何取舍会比较好呢?
【【手动萌萌哒】】

相关文章

  • 小程序开发--伪双向绑定

    这篇帖子写给刚接触小程序的新手,希望在数据绑定方面给大家一点灵感,也欢迎大家积极的探讨更好的双向绑定思路。 废话不...

  • 小程序input实现数据双向绑定

    先说下,小程序并不像前端主流框架那样,实现了数据的双向绑定,他是单向的数据流,而我们开发的时候习惯了双向数据并绑定...

  • 2021-06-08

    今日收获微信小程序双向绑定hidden = "{{offerId==''}}"

  • 小程序双向绑定

    所有事件监听均为bind+eventName,例如bindinput="callbackFunction" 小程序...

  • 小程序 小方法

    微信小程序input数据双向绑定 简单实现双向数据绑定--对象下的属性赋值绑定(可以自己改一元变量方式)每个页面引...

  • 小程序学习笔记-小程序和Vue比较

    最近在研究小程序和vue,发现vue和小程序很多地方都很相似,但是vue的双向数据绑定却比小程序的单向数据绑定好用...

  • 前端面试题(关于vue和小程序)

    vue class 与 style 怎么动态绑定?关键字:v-bind 小程序的双向绑定和vue哪里不一样小程序直...

  • 微信小程序和Vue的区别

    单向绑定 & 双向绑定 微信小程序只支持单向绑定,如果需要修改data的值,只能通过setData操作。Vue可以...

  • 小程序入坑指南

    小程序原理 小程序本质上也是一个MVVM框架,virtual dom,view和model的双向绑定,配合小程序丰...

  • 小程序之双向绑定

    小程序没有像vue一样用v-model就可以实现input框的双向绑定数据,但小程序有自己的方法。 不用点击按钮实...

网友评论

      本文标题:小程序开发--伪双向绑定

      本文链接:https://www.haomeiwen.com/subject/sjcvmxtx.html