Question

假设我有一个java脚本来添加动态创建的kendoComboBox

带有类型文本或隐藏框的占位符HTML输入先前使用ID = cbId创建，其中cbId是分配给Html文本输入框的Id。

var cbId = "comboBoxId";
<input type="hidden" id="\" + cbId + "\" />

然后通过调用此函数将占位符输入Text元素转换为kendoComboBox：

function OP_createComboBox(cbId, placeholder, dataTextField, dataValueField, dataSource, selectFunction ) {
    console.log(" * Creating non-cascading ComboBox...");
    $("#" + cbId).kendoComboBox({
        Name: cbId,
        id: cbId,
        placeholder: placeholder,
        dataTextField: dataTextField,
        dataValueField: dataValueField,
        filter: "contains",
        suggest: true,
        dataSource: dataSource,
        select: onFubarSelect
        });
}

在comboBox中选择项目时，会使用event参数调用onFubar函数。假设onFubar函数定义如下：

function onFubarSelect(e) {
    console.log("== onFubarSelect(e=>%o<=) STARTS!! ==", e);
    console.log("* e.item.index()=>%o<=", e.item.index());
    var dataItem = this.dataItem(e.item.index());
    console.log("* dataItem=>%o<=", dataItem);
    OP_consoleLog("* dataItem.<dataTextField>=>%o<=", dataItem.<dataTextField>);

    //do more logic based upon the values of <dataTextField> and <dataValueField>

    OP_consoleLog("== onFubarSelect() ENDS ==");
}

当从kendoComboBox中选择页面阅读器和项目时，onFubarSelect被调用并且 console.log（“* dataItem =＆gt;％o＆lt; =”，dataItem）;将打印出与此类似的东西：

（“VV”表示“展开对象”向下箭头，“＆gt;＆gt;”表示“未展开对象”右箭头）

== onFubarSelect(e=> VV Object
                                    _defaultPrevented: false
                                    >> isDefaultPrevented: ()
                                    >> item: R.fn.init[1]
                                    >>preventDefault: ()
                                    >>sender: init
                                    >>__proto__: Object<=) STARTS!! 
<= STARTS!! ==

* e.item.index()=>1<=

* dataItem=> VV init                                          <=    
                <dataValueField>: "35dcffc5-e31d-4c60-ac41-31417a700d3b"
                <dataTextField>: "The Value associated with the above Guid"
                >>_events: Object
                >>_handlers: Object
                >>parent: ()
                uid: "f1f1b5c1-f155-40c3-8f69-d9b4a960ac15"
                >>__proto__: init

* dataItem.<dataTextField>=>"The Value associated with the above Guid"<=

== onFubarSelect() ENDS ==

以上是所需行为。

到目前为止一切都很好。但我不想将select参数硬编码为onFubarSelect：

$("#" + cbId).kendoComboBox({
    Name: cbId,
    ...
    select: onFubarSelect
    });

而是我想动态设置它。

我尝试了类似下面的内容，但它报告“未捕获的TypeError：r [n] .call不是函数”...

var selectFunction = "onFubarSelect";

$("#" + cbId).kendoComboBox({
    Name: cbId,
    ...
    select: selectFunction
    });

然后我尝试了类似下面的内容：

var selectFunction = "onFubarSelect";

$("#" + cbId).kendoComboBox({
    Name: cbId,
    ...
    function (e) { window[selectFunction](e); }
    });

调用selectFunction的地方，但'this.dataItem'给出错误：

== onFubarSelect(e=> VV Object
                                    _defaultPrevented: false
                                    >> isDefaultPrevented: ()
                                    >> item: R.fn.init[1]
                                    >>preventDefault: ()
                                    >>sender: init
                                    >>__proto__: Object<=) STARTS!! 
<= STARTS!! ==

* e.item.index()=>1<=

>> Uncaught TypeError: this.dataItem is not a function
        at onFubarSelect
        ...
        rest of stack trace
        ...

我也尝试过：

...
select: select: function (e) { eval(selectFunction + "(e)"); } 
...

使用参数也会触发函数，但是再次使'this.dataItem'保持相同的“this.dataItem不是函数”错误。

那么如何动态动态设置select事件以保留“this.dataItem”???

Answer 1

您需要的是call方法。它允许您定义执行函数时this的内容。阅读它here。

Answer 2

我发现的工作是使用以下内容进行选择操作：

var selectFunction = "onFubarSelect";

...
$("#" + cbId).kendoComboBox({
   Name: cbId,
   ...
   select: function (e) {
      var dataItem = this.dataItem(e.item.index());
      window[selectFunction](dataItem);            
   }
});

... ... ...

function onFubarSelect(dataItem) {
   console.log("== onFubarSelect(dataItem=>%o<=) STARTS!! ==", dataItem);
   //do more logic based upon information in dataItem...
}

如何使用动态命名的事件函数创建kendoComboBox？

2 个答案: