下拉knockoutjs与值从服务器

dropdown knockoutjs with value from server

本文关键字：服务器 knockoutjs 下拉      更新时间：2023-09-26

我正在制作一个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'/>

这是我的knockout

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

感谢

谢谢

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

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

现在你用这个函数构造的对象填充可观察数组:

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/

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

查看这里的工作示例

相关文章：