如何使用 OJET 输入文本 v5.2.0 实现 textInput 绑定？

Question

Knockout 的 textInput 绑定用于与 Oracle JET v3.2.0 ojInputText 标签一起工作。

<input id="text-input" 
     type="text"
     data-bind="ojComponent: {component: 'ojInputText', 
                              textInput: value}"/>

但现在 Oracle JET v5.2.0 的每个组件都是自定义 HTML 组件，textInput 不再起作用。我试过这些方法：

<oj-input-text id="text-input" textInput="{{value}}"></oj-input-text>
<oj-input-text id="text-input" data-bind="textInput: value"></oj-input-text>

有没有办法让 textInput 与 oj-input-text 一起工作？

我也检查了documentation，但什么也没提到。

Answer 1

这是不可能的，您可以在查看图书馆时了解原因。在 ojinputtext.js 中，_onKeyUpHandler 函数专门只侦听 Enter 键，而不侦听其他任何内容。

 _onKeyUpHandler : function (event) 
    {           
       if(event.keyCode === $.ui.keyCode.ENTER){
            this._SetValue(this._GetDisplayValue(), event);             
       }
    }

也无法从您的 viewModel 修改此函数，因为 ojinputtext 最后作为复合组件注册到 OJET 中，只有这样您才能访问它。

  oj.CustomElementBridge.registerMetadata('oj-input-text', 'inputBase', ojInputTextMeta);
  oj.CustomElementBridge.register('oj-input-text', 
                         {'metadata': oj.CustomElementBridge.getMetadata('oj-input-text')});

您可以采取一种变通方法，即在输入文本周围包装一个 Jquery 函数来监听每次击键。

Answer 2

经@Srishti 确认，我无法将textInput 与Oracle JET 一起使用。所以我创建了一个 Knockout Binding Handler 来模仿这种行为，我相信其他人也会觉得这很有用：

<oj-input-text data-bind="textInputOJET: value"></oj-input-text>

JS:

ko.bindingHandlers.textInputOJET = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).focus(function(){
            $($(this).find('input')[0]).keyup(function(event){
                valueAccessor()(event.currentTarget.value);
            });
        });
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {}
}

self.value = ko.observable();
self.value.subscribe(function(newValue){
    console.log(newValue);
});

Answer 3

我认为没有自定义 KO 绑定的正确 OJET 方法是使用 rawValue 而不是 value 属性，如 docs/playground:

中所述

https://www.oracle.com/webfolder/technetwork/jet-520/jsdocs/oj.ojInputText.html#rawValue

https://www.oracle.com/webfolder/technetwork/jet-520/jetCookbook.html?component=textInput&demo=rawValue

如何使用 OJET 输入文本 v5.2.0 实现 textInput 绑定？

How do I implement textInput binding with OJET input text v5.2.0?

custom-component

knockout.js

oracle-jet