从jQuery更新Change Knockout Multiselect值 [英] Updating Change Knockout Multiselect value from jQuery

问题描述

我正在对使用Knockout的项目进行一些调整，而我一辈子都无法弄清楚如何从jQuery更新multiselect的值.我敢肯定，在Knockout中有本机可以做到这一点，但这只是微小的变化，我真的不想深入研究它.

I'm working on making a few tweaks to a project that uses Knockout, and I can't for the life of me figure out how to update the value of a multiselect from jQuery. I'm sure there's ways to do it natively in Knockout, but it's a tiny change and I really don't want to have to dig into it.

选择框的html是这样的:

The html for the select box is this:

<select id="projectSelect" 
    data-bind="multiSelect: { items: projects, value: filteredProject, header: false, multiple: false }, 
    optionsText: 'name', 
    optionsValue: 'id', 
    optionsCaption: 'All Projects'" 
    style="display: none;">
</select>

并在淘汰赛中这样定义:

And defined in Knockout like this:

this.filteredProject = ko.observable(null);

this.filteredProject.subscribe(function(projectId)
        {
            for (var i = 0; i < self.projects.length; i++)
                if (self.projects[i].id == projectId)
                {
                    self.filteredProjectObject(self.projects[i]);
                    self.selectedProjectCheckboxDisabled(false);
                    return
                }
            self.onlyShowHoursForSelectedProject(false);
            self.selectedProjectCheckboxDisabled(true);
            self.filteredProjectObject(null)
        });
this.filteredProjectObject = ko.observable(null);

我当前的jQuery是:

And my current jQuery is :

var projSelect = $("#projectSelect");

projSelect.val(projId).change();
projSelect.multiselect("refresh").change()

而jQuery只需按一下按钮即可运行.

And that jQuery runs on a button press.

当jQuery运行时，multiselect会使用新值进行更新，但与之关联的代码将永远不会运行，并且无论如何我都不能强制Knockout进行更新.在这里撕扯我的头发，所以将不胜感激.

When the jQuery runs, the multiselect updates with the new value, but the code tied to it never runs, and no matter what I do I can't force Knockout to update. Tearing my hair out here, so any help will be very much appreciated.

推荐答案

Knockout和jQuery不能以这种方式很好地工作.您应该真的尝试更新ViewModel，并让Knockout更新视图.我几乎可以保证，从长远来看，坚持使用当前的方法(使用jQuery更新DOM，并使KnockoutJS响应 )肯定会变得更加困难和麻烦.

Knockout and jQuery don't work well in this manner. You should really try to update the ViewModel, and let Knockout update the view. I can nearly guarantee that persisting in your current approach (using jQuery to update the DOM, and getting KnockoutJS to respond to that) is bound to be harder and more troublesome in the long run.

但是，如果您坚持认为，我认为您需要使用trigger 通过常规DOM通知KnockoutJS选择其他选择选项的事件.对于您的代码，可能是:

However, if you insist, I'd think you need to use trigger to notify KnockoutJS via regular DOM events that a different select option was chosen. For your code that would probably be:

projSelect.val(projId).trigger('change');

演示其工作原理:

var ViewModel = function() {
  var self = this;
  self.items = ["apple", "orange", "kiwi"];
  self.currentItem = ko.observable(null);
};

var vm = new ViewModel();

ko.applyBindings(vm);

$('#kiwi').on("click", function() {
  $("#sel").val("kiwi").trigger('change'); // Major hack! Try to avoid needing this.
});

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

<select id="sel" data-bind="options: items, value: currentItem"></select>
<hr />
<button id="kiwi">Set KIWI with jQuery</button>
<hr />
<pre data-bind="text: ko.toJSON($root)"></pre>

这篇关于从jQuery更新Change Knockout Multiselect值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！