Knockout.JS: 绑定 select 的变化事件到另一个 UI 属性

Question

我想让以下输入仅在选择 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 的方法也不起作用。

Answer 1

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

另外，使用 optionsCaption 绑定来显示 "please choose" 选项。否则，您需要手动处理过滤掉该虚拟选项的问题。

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>

Knockout.JS: 绑定 select 的变化事件到另一个 UI 属性

Knockout.JS: Bind change event of select to another UI attribute

javascript

data-binding

knockout.js

durandal

durandal-2.0