使用下拉列表绑定数据答案

【问题标题】：Binding data with dropdown使用下拉列表绑定数据
【发布时间】：2016-05-06 22:40:17
【问题描述】：

我正在制作一个应用程序，其中有两个下拉列表和一个文本框。我要绑定 JSON 数据。我能够绑定下拉列表，即在第一个下拉列表的更改上第二个下拉列表的值是正在改变。问题是我无法将数据与文本字段绑定。任何机构可以帮助我吗？

参考代码为 HTML

<select data-bind="options: financialYear,value: animalTypea, optionsText: 'description',optionsValue: 'value'">
</select>
<select data-bind="options: animalsForType,value: animalType, optionsText: 'description',optionsValue: 'value'"></select>


<input type="text" data-bind="value: subject" />

而JS代码是

response.invocationResult.customerRequestMasterDetailBeans.forEach(function (item1) {
  if(item1.key == "") {
    self.financialYear.push(item1);
  }
});

self.financialYear = ko.observableArray([]);
self.animalTypea = ko.observable();

self.financialYeara = ko.observableArray([]);
self.animalTypea = ko.observable();

self.animalType = ko.observable();

self.subject = ko.observable();

self.animalsForType = ko.computed(function () {
  var selectedType = self.animalTypea();

  return !selectedType ? [] : response.invocationResult.customerRequestMasterDetailBeans.filter(function (data) {
    return data.key == selectedType;
  });
});

self.subject = ko.computed(function () {
  var selectedType = self.animalType();
  return !selectedType ? [] : response.invocationResult.customerRequestMasterDetailBeans.filter(function (data) {

    return data.subjectMessage == selectedType;
  });

});

作为参考，JSON 是

{
    "customerRequestMasterDetailBeans": [
        {
            "requestMessage": "",
            "subjectMessage": "",
            "description": "DocumentRequest",
            "value": "DR",
            "formatMessage": "",
            "serviceCharge": "",
            "key": ""
        },
        {
            "requestMessage": "AservicechargeofRs50.00perstatementrequestwillbeapplied.Doyouwanttoproceed?",
            "subjectMessage": "HardcopyofStatementofAccount",
            "description": "StatementofAccount",
            "value": "SDR",
            "formatMessage": "PleasesendmeahardcopyofupdatedStatementofAccountatmyregisteredaddress.",
            "serviceCharge": "Rs50.00",
            "key": "DR"
        },
        {
            "requestMessage": "AservicechargeofRs50.00perstatementrequestwillbeapplied.Doyouwanttoproceed?",
            "subjectMessage": "HardcopyofForeclosureSimulation",
            "description": "ForeclosureSimulation",
            "value": "FCDR",
            "formatMessage": "PleasesendmeahardcopyofupdatedForeclosureSimulationatmyregisteredaddress.",
            "serviceCharge": "Rs50.00",
            "key": "DR"
        }
    ]
}

实际上，我正在尝试在第一个下拉列表中显示文档请求，在第二个下拉列表中显示账户声明和止赎模拟。现在，如果第二个下拉列表中填充了账户声明，则文本框应显示账户声明，如果止赎模拟然后是止赎模拟的硬拷贝。

【问题讨论】：

我们确实可以帮助您。但是，我们首先需要一些东西。首先，我们需要您尝试在问题中发布的代码
卡勒姆·林宁顿，请检查详细信息可能会有所帮助
您没有在文本字段中包含任何 HTML。它有value 绑定吗？
重现问题的小提琴或代码笔对您和我们都有帮助
首先，属性定义了两次：animalTypea 和 subject。其次，计算出的 subject 返回一个您尝试绑定到单个文本框的数组。

标签： javascript knockout.js knockout-2.0 knockout-validation knockout-mvc

【解决方案1】：

据我所知，您的问题是由于将输入的 value 绑定到 computed 值，这应该取决于视图模型的值并且不应该是可编辑的。

我建议您使用 text 绑定而不是 value 绑定，并使用 span 或 div 代替输入，如 http://knockoutjs.com/documentation/computedObservables.html 中所述。

<span data-bind="text: subject"></span>

如果您真的希望能够在输入节点中编辑主题的值，（您可能希望能够通过在此处键入不同的内容来更改选择）您可以使用 writable当您在此处键入值时，可以观察到告诉淘汰赛您想要做什么（在http://knockoutjs.com/documentation/computed-writable.html 上有很好的解释）。

【讨论】：