Knockout Js用下拉列表切换案例

时间:2015-04-16 07:41:04

标签: knockout.js

我有两个下拉列表。根据第一个下拉列表的选定值,我需要填充第二个下拉列表..

我的HTML代码:

<select class="form-control" data-bind="options: $root.schemas, optionsText: 'schema', value: selschema"></select>
<!-- ko switch: selschema -->
<!-- ko case:  ['Test', 'Another Test'] -->
<select class="form-control" data-bind="options: $root.testschemas, optionsText: 'schema', value: selschematest"></select>
 <!-- /ko -->
 <!-- ko case: $else -->
<select class="form-control" data-bind="options: $root.othertestschemas, optionsText: 'schema', value: selschematest"></select>
<!-- /ko -->
  <!-- /ko -->

我的js代码

function TestViewModel() {
     var self = this;
     self.selschema=ko.observable();
     self.selschematest=ko.observable();

    self.schemas = ko.observableArray([{ "schema": "Test" }, { "schema": "Another Test" }, { "schema": "Other Test" }]);
     self.testschemas = ko.observableArray([{ "schema": "Test1" }, { "schema": "Test2" }]);

 self.othertestschemas = ko.observableArray([{ "schema": "other Test1" }, { "schema": "other Test2" }]);

 }

ko.applyBindings(new TestViewModel());

Jsfiddle:

我正在尝试使用knockout-switch-case by MichaelBest,但它总是在else语句中。

真心感谢任何帮助

由于

1 个答案:

答案 0 :(得分:1)

<!-- ko switch: selschema().schema -->

解决了问题。在html中添加<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>向我展示了方式..

jsfiddle: