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

Question

Скажем, у меня есть Java-скрипт для добавления динамически созданный kendoComboBox

Заполнитель HTML вход с текстом типа или скрытом поле получает ранее созданный с ID = 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 
     }); 
} 

Когда элемент выбран в выпадающем списке, функции onFubar вызывается с аргументом событий. Say функция 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 =>% о < =» , dataItem); напечатает что-то Двойники к этому:

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

== 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 == 

выше является желаемым поведением.

До сих пор все хорошо и хорошо. Но я не хочу, чтобы жестко кодировать выберите аргумент onFubarSelect:

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

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

Я пытался что-то вроде ниже, но он сообщает "неперехваченным TypeError: г [п] .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... 
}