0

我正在处理 TR 中的下拉菜单。我有 true、false 或 none 作为我从服务器收到的值，我希望它更改下拉选项，如下例所示。

第一个正在工作，但我希望第二个充当第一个

示例在这里：http: //jsfiddle.net/3xLgJ/

这是我的 HTML：

       <div data-bind='text: incomingValue'></div>

       <select data-bind="value: incomingValue">
             <option value="true">Yes</option>
             <option value="false">No</option>
             <option value="none">Don't Know</option>
      </select>

我怎样才能像上面那样实现它，因为它在一个 tr 内并像上面一样起作用

      <select  data-bind='options: yesno, value: incomingValue'/>

这是我的淘汰赛

    var myModelView = function () {
    self = this;
    self.yesno = ko.observableArray(['Yes', 'No', 'Don\'t know']);
    self.incomingValue = ko.observable('none');
    };

    var moView = new myModelView();

    ko.applyBindings(moView);

谢谢

谢谢

4

2 回答 2

1

最好的解决方案可能是稍微重构视图模型以使用对象而不是简单的字符串：

// Create a "class" that represents an option
var Option = function(id, caption) {
    this.id = id;
    this.caption = caption;
};

现在你用这个函数构造的对象填充 observable 数组：

self.yesno = ko.observableArray([
    new Option('true', 'Yes'),
    new Option('false', 'No'),
    new Option('none', 'Don\'t know')
]);

您可以使用“optionsText”绑定将这些对象正确绑定到标记：

<select data-bind="options: yesno,
                   optionsText: 'caption',
                   value: selectedItem"></select>

如果你从服务器收到一个字符串“none”，你需要找到代表这个选项的对象：

var incomingValue = 'none';

// Find the first object that is a match in the observable array "yesno"
var incomingItem = ko.utils.arrayFirst(self.yesno(), function(item) {
    return item.id == incomingValue;
});

self.selectedItem = ko.observable(incomingItem);

在其他地方显示选择时，您需要考虑选择由对象表示：

<div data-bind='text: selectedItem().caption'></div>

演示：http: //jsfiddle.net/3xLgJ/2/

于 2013-03-21T13:59:31.940 回答
1

您需要使用optionsText和optionsValue绑定。您需要创建一个可观察的值和文本数组：

self.yesno = ko.observableArray([
    {value:"true",text:"Yes"},
    {value:"false",text:"No"},
    {value:"none",text:"Don't Know"}]);

然后，您需要在 html 中执行以下操作：

<select data-bind="options: yesno2, optionsText: 'text',optionsValue: 'value', value: incomingValue"></select>

有关工作示例，请参见此处

于 2013-03-21T14:00:29.397 回答