Question

使用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页面上，我希望能够更改下拉列表的值，并让下拉列表显示新的opton，并在视图模型中进行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属性存在问题？

Answer 1

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

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

据我所知，那应该更新两者。

你还需要将新id作为字符串传递，因为knockout可能正在使用类型相等比较器（===），而html中的值将是一个字符串。

Answer 2

此块

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

有多个可能的问题。

首先，$(voucherCountry)可能不会评估为有效的选择器;如果您想按ID选择下拉列表，则需要执行以下操作：$("#voucherCountry")。

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

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

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

2 个答案: