Разработка приложений Harmony OS: двусторонняя привязка данных

HarmonyOS

Оригинальная ссылка:Tickets.WeChat.QQ.com/Yes/6v Harem 6 Old Q7V…

Xijiangyue · Тайцзи не разделен на хаос

[юань] Ван Вэйи

Тайцзи не делится на хаос, и два инструмента больше не являются одним из них.

Только один ян может прорваться через Хунмэн, и таким образом используется удача.

Вода и огонь поднимаются и опускаются с севера на юг, а дерево и золото расходятся с запада на восток.

Слегка переместите ручку ковша, чтобы она указывала на Дворец Кун, и сделайте пять элементов замысловатыми.

С момента появления Angular.js он принес миру интерфейсMVVM(Model-View-ViewModel)Angular.js также предлагает еще одну популярную концепцию: двустороннюю привязку данных, которая в основном отражается в связи контента между элементами управления формы и другими элементами управления, даже если в дополнение к Vue другие популярные фреймворки (React, Augular2.0 и более поздние версии) не поддерживаются. больше не имеют синтаксического сахара для двусторонней привязки данных, но вактуальный проект, все фронтенд-разработчики будут реализовывать эту функцию.

Фреймворк JS-приложений ОС Hongmeng по-прежнему использует метод веб-разработки, похожий на небольшую программу.форма однонаправленного потока данныхПодключение переменных JS-скрипта и интерфейс, реализованный языками разметки (html, wxml, hml), поэтому независимыйДостижение двусторонней привязки данных стало темой, которой нельзя избежать.

Сегодня я реализую двустороннюю привязку данных при разработке приложений для ОС Hongmeng, кстати, заполню некоторые пробелы и начну с основного кода.

Код 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 и т. д.

  1. Носимое устройство не поддерживает ввод одной строки текста., этот официальный документ не упоминает;

3. Ни console.log, ни console.info не могут печатать объекты,Для конвертации с помощью JSON.stringify;

4. Атрибут value параметра объекта события onchange valobj является текстовым, а форма объекта, заданная на официальном сайте, — { value: inputValue }, о чем можно судить, распечатав объект;

Эти ямы не очень большие, и студенты с опытом разработки в принципе могут их быстро заполнить.Также вы можете прочитать и сослаться на официальную витрину кейсов.

Прикрепить ссылку на документацию:

Справочная документация компонента ввода:

developer.harmony OS.com/talent/docs/doc…

Официальный код витрины:

Открой Harmony.git ee.com/open Harmony...

Прикрепите Console.log и Console.info Скриншоты консоли печати:

Оригинальная ссылка:Tickets.WeChat.QQ.com/Yes/6v Harem 6 Old Q7V…

Категории