觸發淘汰賽事件從外部

Question

我有以下選擇-元素在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的方法設置「選擇的選項」中的多個元素 - 值。如你所見，那個select有一個數據綁定，它來自knockout。該淘汰賽代碼位於另一個由其他人提供的JavaScript文件中。我們無法真正改變那裏的內容。我們的代碼不是基因敲除，而是簡單的jQuery代碼。

現在我的問題是，該選擇有驗證。當我點擊一個元素手動，這使另一個按鈕等

但是，當我嘗試通過代碼做到這一點，沒有任何反應。我嘗試插入「selected」，$(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。如果您無法更改代碼，那麼您的更改可能實際上應該是應該。像這樣混合使用jQuery和KO會在短期內傷害到你，從長遠來看，它會嚴重損害你嚴重。

PPS。在發佈的KO代碼中有一些奇怪的東西（至少沒有上下文）。首先，它有option s，但這些應該是生成的。其次，聽取change事件，但通常訂閱或可寫入計算結果將是更好的選擇。第三，optionsAfterRender被宣佈兩次。最後，執行enabled值，如果它是可觀察的，則這是多餘的。