Question

淘汰赛的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);             
       }
    }

由于ojinputtext最终已作为复合组件注册到OJET中，因此您无法访问它，因此无法从viewModel修改此功能。

  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确认，我不能在Oracle JET中使用textInput。因此，我创建了一个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);
});

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

2 个答案: