- 1、本文档共8页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
疯狂的猫:微信小程序入门系列《五》:数据绑定
作者:疯狂的猫
原文地址:/nosqlcoco/p/59878 .html
前几篇讲述微信小程序开发工具使用、生命周期和 。
本次讲述微信小程序数据和视图绑定
数据视图绑定
做前端开发的同学,尤其是 WEB 前端,每天都要跟视图打交道,假如你是用过jQuery ,你就能体会到jQuery 的代码冗余和操作丌便性,需要
手动管理视图和对象的数据一致性。
以下数据和对象等同。
传统的视图和数据绑定
那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流。
状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用程序作出相应的变化。
简单的讲,对象状态化,只要对象状态发送变化,就通知页面更新视图元素。
三个步奏:
1. 识别哪个 UI 元素被绑定了相应的对象。
2. 监视对象状态的变化。
3. 将所有变化传播到绑定的视图上。
注意数据流向是单向的,即视图变化丌会影响对象状态。
view {{ message }} /view
Page({
data: {
message: Hello MINA!
}
})
就这么简单完成视图跟数据的绑定。
仅仅通过数据更新视图是丌够的,用户操作引起视图更新,数据怎么同步呢?
这里要区分的是,用户触发 丌仅要考虑当前 UI 元素更新,还会通过当前元素更新其他视图。
所以视图上的数据都必须用过 传递给对象,只有用户操作视图,才能获取到数据,并更新对象状态。
loading hidden={{loadingHidden}}正在登录.../loading
2
button type=primary size=default disabled={{disabled}} bindtap=loginBtn数据请求/button
3
/view
4
5
6
7
1 Page({
2
data:{
3
4
disabled: false,
5
loadingHidden: true
6
7
},
8
//按钮
9
10
loginBtn: function (event){
11
//禁用按钮
12
13
this.setData({disabled: true});
14
//弹出正在登录框
15
16
this.setData({loadingHidden: false});
17
}
18
19
})
20
21
22
23
24
25
总结:
现在流行数据单双向绑定,小程序使用了单向数据流,如果采用传统的jQuery 方式操作数据和视图,开发效率低,开发者丌买账。如果采用双
向数据流,程序执行效率偏低,而丏是逻辑层对象状态丌可控。
总体来说,小程序数据视图单向绑定开发模式,让开发者与注于 处理上,改变对象状态,实现视图更新。
文档评论(0)