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

2017-11-09  本文已影响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如何取舍会比较好呢?
【【手动萌萌哒】】

上一篇 下一篇

猜你喜欢

热点阅读