乐趣区

关于harmonyos:鸿蒙OS应用开发双向数据绑定

原文链接:https://mp.weixin.qq.com/s/6v…

西江月·太极未分混沌

[元] 王惟一

太极未分混沌,两仪已非其中。

一阳才动破鸿蒙,造化从兹使用。

水火升沉南北,木金距离西东。

略移斗柄指坤宫,尽把五行错综。

自 Angular.js 面世后,给前端界带来 MVVM(Model-View-ViewModel) 的分层架构思维,这也对简直所有的支流前端框架影响颇深,Angular.js 也带来另一个风行概念:双向数据绑定,这个次要体现在表单控件与其余控件的内容联动上,即便除了 Vue 以外的其余风行框架 (React、Augular2.0 当前)都不再有双向数据绑定的语法糖,但在 理论我的项目 中,所有的前端开发人员都会去实现这一个性。

鸿蒙 OS 的 JS 利用框架延用的是一品种小程序的 Web 开发方式,同 React 和微信小程序一样,以 单向数据流的模式 连通 JS 脚本变量与标记语言 (html、wxml、hml) 实现的界面,因而自主 实现双向数据绑定也就成了绕不开的话题

明天就在鸿蒙 OS 利用开发中实现双向数据绑定,顺便填平一些坑,先上外围代码。

index.hml 代码如下:

<div class="container">
 <text class="title">
 {{title}}
 </text>
 <!-- 坑点 1:官网文档给出的事件属性都没有 on 前缀,理论应用本人要加上:onclick、onchange 等 -->
 <!-- 坑点 2:穿戴设施不反对 input 单行文本;只有 TV 我的项目反对;-->
 <input type="text" onchange="chageModel"
 value="{{title}}"
 style="width:300px;height:50px;color:blue;background-color:#fff"/>
 <!-- input 控件属性:type="text" 指定为单行文本控件 -->
 <!-- input 控件属性:value="{{title}}" 文本框值绑定 js 脚本变量 title -->
 <!-- input 控件属性:onchange="chageModel" 文本框内容扭转触发自定义函数 chageModel -->
 <!-- input 控件属性:行内款式属性与 CSS 基本相同 -->
</div>

index.js 代码如下:

export default {
 data: {title: "", //js 脚本变量 title},
 onInit() {this.title = "鸿蒙 OS 双向数据绑定";},
 chageModel(val_obj){
 //obj 是事件对象,官网文档有坑
 console.info("info 信息:"+JSON.stringify(val_obj));
 console.log("log 信息:"+JSON.stringify(val_obj));
 // 坑点 3:console.log 和 console.info 都不能打印对象,要通过 JSON.stringify 转化;// 坑点 4:valobj 的取值属性是 text;this.title = val_obj.text;
 //UI 框架是单向数据流,要事件驱动实现双向数据绑定
 }
}

实现的代码非常简单,次要填了 4 个坑:

  1. 官网文档给出的 事件属性都没有 on 前缀,理论应用本人要加上:onclick、onchange 等 
  2. 穿戴设施不反对 input 单行文本,这个官网文档没有提到;
  3. console.log 和 console.info 都不能打印对象,要通过 JSON.stringify 转化;
  4. onchange 事件对象参数 valobj 的取值属性是 text,官网给出的对象模式是{value:inputValue},这个要通过打印对象能力判断进去

这些坑都不是很大,有开发教训的同学根本都能很快填平,也能够浏览参考官网给出的案例 showcase。

附上文档链接:

input 组件参考文档:

https://developer.harmonyos.c…

官网 showcase 代码:

https://openharmony.gitee.com…

附上 console.log 和 console.info 打印控制台截图:

退出移动版