Trigger Нокаут-событие от внешнего

Question

У меня есть следующий Select-элемент в HTML-форму:

<select multiple="multiple" data-bind="options: candidateList, optionsValue: 'id', optionsText: 'title', optionsAfterRender: setOptionTitle, selectedOptions: selectedCandidates, optionsAfterRender: setOptionTitle, event: { dblclick: addSelectedCandidate, change: candidateChanged }, enable: enabled()"> 
<option title="first" value="1">first</option> 
<option title="second" value="2">second</option> 
<option title="third" value="3">third</option> 
</select> 

Теперь выбрать несколько элементов из этого Выберите с помощью JQuery-методы установки "Option SELECTED" - значение.

Как вы можете видеть, этот выбор имеет привязку данных к нему, которая от нокаута. Этот нокаут-код находится в другом файле JavaScript, предоставленном кем-то другим. Мы не можем изменить контент там. И наш код НЕ является нокаутом, а просто jQuery-Code.

Теперь моя проблема в том, что на этом выборе есть проверки. Когда я нажимаю на элемент вручную, это позволяет использовать другую кнопку и т. Д.

Но когда я пытаюсь сделать это по коду, ничего не происходит. Я попытался вставить «выбранные», $(option).trigger('click'), $(option).click(), $(option).trigger('change') и $(option).change();

Есть ли способ заставить нокаут «распознать» материал, который мы меняем программно?

Answer 1

Используйте val, а затем trigger('change'), и он будет работать. Вот демо:

ko.applyBindings({ 
 
    candidateList: [{ id: 1, title: "first" }, { id: 2, title: "second" }, { id: 3, title: "third" }], 
 
    setOptionTitle: function() { }, 
 
    selectedCandidates: ko.observableArray(), 
 
    addSelectedCandidate: function() { }, 
 
    candidateChanged: function() { }, 
 
    enabled: ko.observable(true) 
 
}); 
 

 
function getRandomVal() { return (Math.floor(Math.random() * (3 - 1)) + 1).toString(); } 
 

 
window.setInterval(function() { 
 
    var vals = []; 
 
    if (Math.random() > 0.75) { vals.push(getRandomVal()); } 
 
    if (Math.random() > 0.75) { vals.push(getRandomVal()); } 
 
    if (Math.random() > 0.75) { vals.push(getRandomVal()); } 
 
    $("select").val(vals).trigger("change"); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<select multiple="multiple" data-bind="options: candidateList, optionsValue: 'id', optionsText: 'title', optionsAfterRender: setOptionTitle, selectedOptions: selectedCandidates, optionsAfterRender: setOptionTitle, event: { dblclick: addSelectedCandidate, change: candidateChanged }, enable: enabled()"> 
 
<option title="first" value="1">first</option> 
 
<option title="second" value="2">second</option> 
 
<option title="third" value="3">third</option> 
 
</select> 
 

 
<hr> 
 
Selected candidates: <code data-bind="text: ko.toJSON($root.selectedCandidates, null, 2)"></code>

PS. Вероятно, у вас есть политическая проблема, если вы не можете изменить код, где ваши изменения, вероятно, на самом деле должен go. Смешивание jQuery и KO, как это, повредит вам в краткосрочной перспективе, и это повредит вам плохо в конечном счете.

PPS. В этом коде KO есть несколько странных вещей (без контекста). Во-первых, в нем есть option s, но это должно быть сгенерировано. Во-вторых, прослушивается событие change, но, как правило, выбор для подписки или записи может быть лучшим выбором. В-третьих, optionsAfterRender объявляется дважды. Наконец, выполняется значение enabled, что является излишним, если оно будет наблюдаемым.