使用下拉列表绑定数据

Question

我正在制作一个应用程序，其中有两个下拉列表和一个文本框。有我要绑定的 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"
        }
    ]
}

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

Answer 1

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

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

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

如果你真的希望能够在输入节点中编辑主题的值，（你可能希望能够通过在这里键入不同的东西来更改选择），你可以使用一个可写的可观察量来告诉 KNOCKOUT 当你在那里输入一个值时你想做什么（http://knockoutjs.com/documentation/computed-writable.html 很好的解释）。