Knock out js - 基于在选择控件中选择的选项绑定值答案

【问题标题】：Knock out js - Binding values based on the option selected in the select controlKnock out js - 基于在选择控件中选择的选项绑定值
【发布时间】：2013-12-27 15:04:21
【问题描述】：

我正在使用淘汰 js

我将控件的值绑定如下，

HTML，

<html>
    <select id ="eg" data-bind:"value:name().nationality.gender.Id"/>
        <option>1</option>
        <option>2</option>
        <options>3</option>
        <option>4</option>
    </select>   
</html>

JavaScipt，

function viewmodel(objservermodel)
{
    var self = this;
    self.name = ko.observable(ko.mapping.fromJS($.parseJSON(objservermodel));
}

json是这样来的，

   {"nationality":[{"gender":{"Id":"1"}}]}

但是当我将其称为“数据绑定：”value:name().nationality.gender.Id“”时

它说 Id 未定义，

我也试过了，

   "value: name().nationality[0].gender.Id" or "value: name().nationality()[0].gender().Id"

我只收到控制台错误消息，

     Uncaught Error: Unable to parse bindings.
     gender undefined
     Bindings value:  value:value: name().nationality[0].gender.Id

有人可以告诉我如何精确绑定到 Id，

Id 值应根据在选择控件中选择的选项进行绑定。

试了几次，还是没有解决，

非常感谢任何帮助，

谢谢。

【问题讨论】：

在 jsfiddle 中创建示例
select 不是这样绑定的。请看看this

标签： javascript json mvvm knockout.js knockout-2.0

【解决方案1】：

我试过了，

  data-bind:"value:name().nationality()[0].gender.Id"

并且值会随着选择控件中所选选项的每次更改而更新。

这对我有用。

【讨论】：

【解决方案2】：

由于 JSON 作为数组对象返回国籍，

我必须将其绑定为，

 data-bind:"value:name().nationality()[0].gender.Id" 

 data-bind:"value:name().nationality()[1].gender.Id" 

 data-bind:"value:name().nationality()[2].gender.Id"

等等。

因此解决了。

【讨论】：

【解决方案3】：

单个选择列表绑定到一个可观察数组，如下所示：

Javascript：

function viewmodel(objservermodel)
{  
    var parseJson = function(){
        ......//parse nationalities json array
    }

    self.nationalities = ko.observableArray(parseJson()); //js array with all parsed nationalities from incoming json
    self.selectedNationality = ko.observable(); //this gives you the current selected nationality object


}



ko.applyBindings($("#foo")[0], viewmodel); //apply bindings!!!

HTML：

<div id="foo">
<select id ="eg" data-bind:"options: nationalities, value: selectedNationality"/>
</div>

【讨论】：