dropdown knockoutjs与服务器的价值

时间:2013-03-21 13:41:00

标签: javascript knockout.js knockout-mapping-plugin knockout-2.0 knockout-mvc

我正在处理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);  

由于

由于

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

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