使用jQuery更新knockoutjs下拉列表和knockout值答案

【问题标题】：Updating a knockoutjs dropdown list and the knockout value using jQuery使用jQuery更新knockoutjs下拉列表和knockout值
【发布时间】：2013-07-13 09:17:15
【问题描述】：

使用 knockoutJs 我在页面上有一个简单的选择

<select id="voucherCountry" data-bind="options: availableCountries, optionsValue:'isoId', optionsText: 'country', value:selectedCountry"></select>

在我的视图模型中

function searchViewModel()
{
    var self = this;
    self.voucherNumber = ko.observable();
    self.selectedCountry = ko.observable();
    self.availableCountries = ko.observableArray(
        [
            new Country(250, 'France'),
            new Country(276, 'Germany'),
            new Country(724, 'Spain'),
            new Country(380, 'Italy'),
            new Country(826, 'United Kingdom')
        ])

和

function Country(iso, name)
{
    this.isoId = iso;
    this.country = name;
}

在 HTML 页面上，我希望能够更改下拉列表的值，并让下拉列表显示新的选项，并在视图模型中更新 selectedCountry。

所以我尝试了一个简单的jQuery语句

function changeCountry(isoId)
{
    $(voucherCountry).val(isoId);
}

这样称呼

changeCountry(380);

当我调用它时，下拉菜单上的文本不会改变，但是当我单击它来更改选项时，我想要将其更改为的选项会突出显示。

当我查看对 selectedCountry() 变量有什么帮助时，它被设置为初始值，而不是更改后的值。

看来它正在更新 UI 而不是视图模型。

我很确定应该有一个简单的解决方案，但我不明白

更新：

好的，现在我有一个按钮

<button type="button" data-theme="b" data-bind="click: scanBarcode">Scan Barcode</button>

在视图模型中这个函数：

self.scanBarcode = function()
{
    self.selectedCountry(380);
}

selectedCountry 正在更新，但 UI 未更新。

我认为我在 <select> 数据绑定中使用 optionsValue 和 value 属性的方式存在问题？

【问题讨论】：

标签： knockout.js

【解决方案1】：

您的 changeCountry 方法应该更改您已将 select 绑定到的底层 observable 的值：

function changeCountry(isoId)
{
    selectedCountry(isoId);
}

据我所知，这应该同时更新两者。

您还需要将新 id 作为字符串传递，因为敲除可能使用类型相等比较器 (===)，并且 html 中的值将是一个字符串。

【讨论】：

我认为视图应该不知道视图模型变量。我想模仿用户选择选项的动作，然后更新视图模型变量。对我来说，视图上的 javascript 函数应该访问视图模型似乎是错误的。这是正确的吗？
老实说，我不太清楚你的意思。通过使用 Knockout，您可以将视图 (Html) 绑定到视图模型，这很重要。是您在视图模型上的 changeCountry 方法，因为那是我放置这种逻辑的地方，这可能就是为什么它对我来说感觉正确的原因。这更有意义吗？
我看到了我的错误，我使用了一个在 html 页面上嵌入了 javascript 的示例，我调用它而不是调用更新视图模型变量的视图模型函数。感谢您的帮助
嗯，它看起来是正确的，并且与文档相匹配，所以我对此有点困惑，恐怕！唯一可能的想法是您在任何地方都使用 id 作为数字，并且选项本身的值将是一个字符串，因此如果敲除正在执行 === 比较，那将失败。这只是一个猜测！
猜得好！ self.selectedCountry("380");做了这项工作。谢谢

【解决方案2】：

这个区块

function changeCountry(isoId)
{
    $(voucherCountry).val(isoId);
}

有多个可能的问题。

首先，$(voucherCountry) 可能不会评估为有效的选择器；如果你想通过 id 选择下拉菜单，你需要这样做：$("#voucherCountry")。

然后你可以使用$("#voucherCountry").val(123)。

可能混淆的第二件事是您正在修改 UI 作为间接修改视图模型的一种方式 - 您可能最好直接更新您的 VM，如 searchViewModel.selectedCountry(123)

【讨论】：

我看到了我的错误，我使用了一个在 html 页面上嵌入了 javascript 的示例，我调用它而不是调用更新视图模型变量的视图模型函数。感谢您的帮助