Question

我有一个包含两个选项的下拉列表 - 选中时每个选项都会更改视图中内容的显示。如何连接下拉列表选项以更改要显示的内容并隐藏另一个内容。

这就是我所拥有的：

<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>

<强>视图模型：

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

工作样本 here

Answer 2

相反：

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

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

就这样做：

<div data-bind="visible: selectedItem ">

Answer 3

提供的代码不够清晰，所以我假设了一些事情。

检查这个小提琴：Demo

如果您绑定选择列表，那么我建议使用一个对象作为键值对。假设您将对象命名为 MyItem ，如下所示：

function MyItem(name, value) {
        this.name = name;
        this.value = value;
    }

这将包含select中选项的文本和值，您的视图模型将如下所示。

$(function () {

    function MyItem(name, value) {
        this.name = name;
        this.value = value;
    }

    function MyViewModel() {
        var self = this;
        self.items = ko.observableArray
        ([
             new MyItem('A','a'), // 'A' will be option's text and 'a' will be option's value
             new MyItem('B','b')
        ]);

        self.selectedView = ko.observable();
    }

    ko.applyBindings(new MyViewModel());
});

在你的项目中，你可以传递对象，而不是像['A'，'B']那样添加普通数组，而你的Html看起来像：

<select data-bind="options: items,value:selectedView,optionsText:'name', optionsValue:'value'"></select>
<div class="itemA" data-bind="visible:selectedView()=='a'">Div A</div>
<div class="itemB" data-bind="visible:selectedView()=='b'">Div B</div>

敲除if语句来改变页面视图内容

3 个答案: