具有来自服务器的值的下拉敲除js

Question

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

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

Example is here: 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);  

谢谢

谢谢

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

Answer 2

您需要使用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>

有关工作示例，请参阅 here