Original link:Mp.weixin.qq.com/s/6vhg6lQ7V…

Taiji is not divided into chaos

[Yuan] Wang Weiyi

The poles are not divided into chaos, and the two instruments are not in it.

A Yang to break hongmeng, fortune from this use.

Fire and water sink north and south, wood and gold separated west and east.

Slightly moved bucket handle refers to kun palace, as the five intricate.

Since the launch of Angular.js, it has brought the idea of model-view-viewModel (MVVM) layered architecture to the front-end world, which has influenced almost all major front-end frameworks. Angular.js has also brought another popular concept: Two-way data binding is a feature that is implemented by all front-end developers in real projects, even though other popular frameworks other than Vue (React, Augular2.0 and later) don’t have syntactic sugar for two-way data binding.

The JS application framework of Hongmeng OS extends the Web development mode of a small program. Like React and wechat small programs, it connects JS script variables with markup languages (HTML, WXML, HML) in the form of one-way data flow, so the independent implementation of two-way data binding has become an unavoidable topic.

Today in hongmeng OS application development to achieve two-way data binding, incidentally fill in some pits, first on the core code.

The index.hml code is as follows:

<div class="container"> <text class="title"> {{title}} </text> <! Onclick, onchange, onchange, etc. --> <! -- Pitfall 2: wearable devices do not support input single line text; Only TV project support; --> <input type="text" onchange="chageModel" value="{{title}}" style="width:300px; height:50px; color:blue; background-color:#fff"/> <! -- Input control attribute: type="text" specifies a single-line text control --> <! -- Input control attribute: value="{{title}}" textbox value binding JS script variable title --> <! -- Input control property: onchange="chageModel" text box content changes trigger custom function chageModel --> <! -- input control attribute: style="..." Inline style attributes are basically the same as CSS --> </div>Copy the code

The index.js code is as follows:

Export default {data: {title: "", //js script variable title}, onInit() {this.title = ""; }, chageModel(val_obj){//obj is the event object, the official documentation has the pit console.info("info: "+ json.stringify (val_obj)); Console. log("log info: "+ json.stringify (val_obj)); // pit 3: neither console.log nor console.info can print objects, instead use json. stringify; // pit 4: the value of valobj is text; this.title = val_obj.text; // The UI framework is a one-way data stream, which is event-driven to complete two-way data binding}}Copy the code

The implementation of the code is very simple, mainly filled in four holes:

1. The event attributes provided by the official documentation do not have the prefix on. In actual use, you need to add: onclick, onchange, etc

  1. Wearable devices do not support input single-line text, which is not mentioned in this official document;

3. Neither console.log nor console.info can print objects.

4. The value attribute of the onchange event object parameter valobj is text. The object form of the official website is {value:inputValue}, which can be determined by printing the object.

These pits are not very large, and students with development experience can basically fill them quickly. They can also read and refer to the official case showcase.

Attach a link to the documentation:

Input component Reference documentation:

Developer.harmonyos.com/cn/docs/doc…

Official Showcase code:

Openharmony.gitee.com/openharmony…

Attach console.log and console.info to print console screenshots:

The original link: mp.weixin.qq.com/s/6vhg6lQ7V…