javascript - 删除 if 语句以更改页面 View 内容

Question

我有一个包含两个选项的下拉列表 - 选择每个选项时都会更改 View 中内容的显示。我如何连接我的下拉选择来更改内容以显示和隐藏其他内容。

这是我所拥有的:

<select data-bind="options: items, value: selectedItem"></select>

//if selectedItem = 'A'
<div class="itemA">....</div>

//if selectedItem = 'B'
<div class="itemB">....</div>

self.items = ko.observable(['A', 'B']);
self.selectedItem = ko.observable();

更新:我已经更新了我的代码以显示我的可观察结果。

因此，如果从下拉列表中选择“A”，它将显示，而“B”应该隐藏

Answer 1

正如评论中提到的

查看:

<select data-bind="options: items,optionsCaption:'-select-', value: selectedItem"></select>
<div data-bind="if:selectedItem() == 'A'" class="itemA">A</div>
<div data-bind="if:selectedItem() == 'B'" class="itemB">B</div>

View 模型:

var ViewModel = function () {
   var self = this;
   self.items = ko.observable(['A', 'B']);
   self.selectedItem = ko.observable(self.items()[0]);
};      
ko.applyBindings(new ViewModel());

工作样本 here