Как создать kendoComboBox с динамически именованными функциями событий?

Предположим, у меня есть java-скрипт для добавления динамически созданного kendoComboBox

Заполнитель HTML-ввода с типом text или hidden box получает ранее созданный с идентификатором=cbId, где cbId-идентификатор, присвоенный HTML-текстовому входному окну.

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

Затем вводимый текстовый элемент-заполнитель преобразуется в 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 функции 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 вызывается и
приставка.log («*dataItem=>%o>:

(под «VV «обозначает» расширенный объект «стрелка вниз, а» > > > «представляет» нерасширенный объект » стрелка вправо)

== 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
    });

Скорее я хочу установить его динамически.

Я попытался что-то вроде ниже, но он сообщает «Uncaught TypeError: r[n].вызов не является функцией»…

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)"); } 
...

Который также попадает в функцию с аргументом, но снова оставляет ‘это.dataItem ‘ с тем же «это.dataItem не является функцией» ошибка.

Так как я могу динамически установить событие select динамически так «это.dataItem » сохраняется???

2 ответа

  1. Похоже, что вам нужен callметод. Он позволяет определить, что thisпроисходит при выполнении функции. Читайте об этом здесь .

  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...
    }