从外面触发Knockout-Event

时间:2016-03-07 09:33:14

标签: jquery knockout.js

我在html格式中有以下Select-Element:

<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-Methods选择选择的多个元素&#34; Option SELECTED&#34; - 价值。

正如您所看到的,该选择具有数据绑定,来自淘汰赛。淘汰赛代码是由其他人提供的另一个JavaScript文件。我们无法真正改变那里的内容。我们的代码不是淘汰,而是简单的jQuery-Code。

现在我的问题是,该选择有验证。当我手动点击一个元素时,这会启用另一个Button等。

但是当我尝试通过代码执行此操作时,没有任何反应。我尝试插入&#34;已选择&#34;,$(option).trigger('click')$(option).click()$(option).trigger('change')$(option).change();

有没有办法强迫淘汰赛'#34;识别&#34;我们以编程方式更改的内容?

1 个答案:

答案 0 :(得分:1)

使用val然后使用trigger('change'),它就能正常运行。这是一个演示:

&#13;
&#13;
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);
&#13;
<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>
&#13;
&#13;
&#13;

PS。如果您无法更改可能实际 的更改的代码,那么您可能主要是一个政治问题。像这样混合使用jQuery和KO会在短期内伤害到你,从长远来看它会伤害你严重

PPS。在KO代码中发布了一些奇怪的东西(至少没有上下文)。首先,它有option个,但那些应该生成。其次,监听change事件,但通常订阅或可写计算将是更好的选择。第三,optionsAfterRender被宣告两次。最后,执行enabled值,如果它是可观察的,这是多余的。