使用下拉列表绑定数据

时间:2016-01-29 08:54:19

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

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

实际上我试图在第一个下拉列表中显示文档请求,并在第二个下拉列表中显示帐户和止赎模拟声明。现在,如果第二个下拉列表中填入了“帐户报表”,则文本框应显示“帐户报表”和“止赎模拟”然后是Foreclosure Simulation的硬拷贝。

1 个答案:

答案 0 :(得分:0)

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

我建议您使用 text 绑定而不是绑定,并使用span或div而不是输入,如http://knockoutjs.com/documentation/computedObservables.html所述。< / p>

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

如果您真的希望能够在输入节点中编辑主题的值,(您可能希望能够通过在此处键入不同的内容来更改选择),则可以使用可写当你在那里输入一个值时,可以观察到你想要做什么(在http://knockoutjs.com/documentation/computed-writable.html处有很好的解释)。