从外部触发淘汰赛 [英] Trigger Knockout-Event from outside

问题描述

我在 html 表单中有以下 Select-Element:

I have the following Select-Element in an html-form:

<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 设置Option SELECTED" - 值来选择该 Select 的多个元素.

Now I select multiple Elements of that Select using jQuery-Methods setting the "Option SELECTED" - value.

如您所见，该选择具有数据绑定，它来自淘汰赛.该敲除代码位于其他人提供的另一个 JavaScript 文件中.我们不能真正改变那里的内容.我们的代码不是淘汰赛，而是简单的 jQuery 代码.

As you can see, that select has a data-binding on it, which is from knockout. That knockout-code is in another JavaScript-File provided by someone else. We cannot really change content there. And our code is NOT knockout-, but simple jQuery-Code.

现在我的问题是，那个选择有验证.当我手动点击一个元素时，这会启用另一个按钮等.

Now my problem is, that there are validations on that select. When I click onto an element manually, this enables another Button etc.

但是当我尝试通过代码执行此操作时，没有任何反应.我尝试插入选定"，$(option).trigger('click'), $(option).click(), $(option).trigger('change') 和 $(option).change();

But when I try to do this by code, nothing happens. I tried inserting the "selected", $(option).trigger('click'), $(option).click(), $(option).trigger('change') and $(option).change();

有没有办法强制淘汰赛识别"我们以编程方式更改的内容?

Is there any way to force knockout to "recognize" the stuff we change programmatically?

推荐答案

使用 val 和 trigger('change') 就可以了.这是一个演示:

Use val and then trigger('change') and it'll work. Here's a demo:

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>

附注.如果您不能更改代码，那么您可能主要是政治问题，而您的更改可能实际上应该.像这样混合使用 jQuery 和 KO 会在短期内伤害你，从长远来看它会严重伤害你.

PS. You have mostly a political problem probably, if you cannot change the code where your changes probably actually should go. Mixing jQuery and KO like this will hurt you in the short run, and it will hurt you badly in the long run.

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

PPS. There's a few weird things (without context at least) in that KO code as posted. First, it has options in it, but those should be generated. Second, the change event is listened to, but typically a subscription or writeable computed would be a better choice. Third, the optionsAfterRender is declared twice. Lastly, the enabled value is executed, which is superfluous if it would be an observable.

这篇关于从外部触发淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！