knockout.js 如何实现textInput与OJET输入文本v5.2.0的绑定?

zzoitvuj  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(225)

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>

有没有办法让textInputoj-input-text一起工作?
我也检查了documentation,但没有提到任何内容。

monwx1rj

monwx1rj1#

ojinputtext.js中,_onKeyUpHandler函数只监听Enter键,不监听其他任何内容。

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

也不可能从您的viewModel中修改此函数,因为ojinputtext在OJET中最终注册为Composite Component,只有这样您才能访问它。

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

您可能会做一个变通办法,在输入文本周围 Package 一个Jquery函数,以侦听每个击键。

vu8f3i0k

vu8f3i0k2#

正如@Srishti所证实的那样,我不能将textInput与Oracle JET一起使用。因此,我创建了一个Knockout绑定处理程序来模仿这种行为,我相信其他人也会发现这一点:

<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);
});
6rqinv9w

6rqinv9w3#

我认为在没有自定义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

相关问题