Question

我正在努力对使用Knockout的项目进行一些调整，但我不能为我的生活找出如何从jQuery更新多选的值。我确信在Knockout中有原生方式可以做到这一点，但这是一个微小的变化，我真的不想深入研究它。

选择框的html为：

<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>

在Knockout中定义如下：

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是：

var projSelect = $("#projectSelect");

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

jQuery按下按钮运行。

当jQuery运行时，multiselect使用新值进行更新，但绑定到它的代码永远不会运行，无论我做什么，我都无法强制Knockout更新。在这里撕扯我的头发，所以任何帮助都将非常感激。

Answer 1

Knockout和jQuery不能以这种方式运作良好。你应该真的尝试更新ViewModel，让Knockout更新视图。我几乎可以保证坚持你当前的方法（使用jQuery来更新DOM，并让KnockoutJS 响应）从长远来看必然会更难，更麻烦。

但是，如果你坚持，我认为你需要use trigger通过常规DOM事件通知KnockoutJS，选择了不同的选择选项。对于你的代码可能是：

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

要说明这是如何工作的：

＆＃13;

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.
});

＆＃13;

<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>

＆＃13;

从jQuery更新Change Knockout Multiselect值

1 个答案: