Knockout.JS：将选择的更改事件绑定到另一个 UI 属性答案

【问题标题】：Knockout.JS: Bind change event of select to another UI attributeKnockout.JS：将选择的更改事件绑定到另一个 UI 属性
【发布时间】：2016-02-25 21:34:33
【问题描述】：

我想让以下输入仅在选择 database 属性时才可见（在 Bootstrap 更改事件中）。在 Knockout JS 中是否有一个优雅而有效的解决方案可以在 HTML 中执行此操作，如果没有，那么 JavaScript 方式是什么？

<select id="db" class="form-control" data-bind="value: database, valueUpdate: 'change'">
    <option disabled selected> -- select an option -- </option>
    <option>MySQL database format</option>
    <option>PostgreSQL database format</option>
    <option>Other format</option>
</select>

<label>Address :</label>
<input type="text" class="form-control" id="address" data-bind="visible: database">
<label>Port :</label>
<input type="text" class="form-control" id="port">

我正在考虑使用data-bind="visible: typeof database != 'undefined'" 之类的东西，但尝试访问database 时会抛出Uncaught ReferenceError: database is not defined。使用 jQuery 的方法也不起作用。

【问题讨论】：

标签： javascript knockout.js data-binding durandal durandal-2.0

【解决方案1】：

将您的选项存储在一个数组中，并通过选项绑定将它们绑定到选择输入。要存储选定的值，请使用（您现有的）数据库 observable。基于该 observable，您可以在数据库 observable 具有选定选项时显示表单字段（或隐藏它们，如果没有）。

另外，使用 optionsCaption 绑定来显示“请选择”选项。否则，您需要手动处理过滤掉该虚拟选项。

function viewModel(){
  this.databaseOptions = ko.observableArray(["MySQL database format", "PostgreSQL database format", "Other format"]);
  this.database = ko.observable();
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select id="db" class="form-control" data-bind="options: databaseOptions, optionsCaption: ' -- select an option -- ', value: database">

</select>
<hr />
<div data-bind="if: database">
  <label>Address :</label>
  <input type="text" class="form-control" id="address" data-bind="visible: database">
  <label>Port :</label>
  <input type="text" class="form-control" id="port">
</div>

【讨论】：