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

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

作者: 君道 | 来源:发表于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如何取舍会比较好呢?
    【【手动萌萌哒】】

    相关文章

      网友评论

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

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