原文链接：https://mp.weixin.qq.com/s/6vhg6lQ7VoDxrnH6a6qwzw

西江月·太极未分混沌

[元] 王惟一

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

一阳才动破鸿蒙，造化从兹运用。

水火升沉南北，木金间隔西东。

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

 

自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控件属性：style="..." 行内样式属性与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.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673

官方showcase代码：

https://openharmony.gitee.com/openharmony/ace_lite_jsfwk/tree/master/examples

 

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