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

【问题标题】：How do I implement textInput binding with OJET input text v5.2.0?如何使用 OJET 输入文本 v5.2.0 实现 textInput 绑定？
【发布时间】：2019-02-07 09:55:44
【问题描述】：

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，但没有提及。

【问题讨论】：

标签： knockout.js custom-component oracle-jet

【解决方案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 函数包装在输入文本周围，以监听每次击键。

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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

【讨论】：