KnockoutJS 3.X API 第四章之表单value绑定

KnockoutJS：一个以数据模型为基础的JavaScript类库，为你创建响应式用户界面提供强大支持

KnockoutJS是一个基于数据模型的JavaScript类库，能够帮助你轻松创建富文本、响应式显示和编辑用户界面。无论何时，只要你的UI需要自动更新，无论是基于用户行为还是外部数据源的改变，KnockoutJS都能轻松帮你实现，且易于维护。

其主要特性包括优雅的依赖追踪、声明式绑定以及轻易可扩展性。它还是纯JavaScript类库，兼容任何服务器端和客户端技术，可轻松添加到Web程序最上部，无需大的架构改变。其简洁的Gzip压缩后大小约为25kb，兼容所有主流浏览器。

今天我们要特别关注的是KnockoutJS中的表单value绑定。value绑定主要用于DOM元素与视图模型之间的赋值。它通常用于如input、select、textarea等元素。

value绑定与text绑定的主要区别在于，当用户编辑表单控件的值时，value绑定能自动更新视图模型的相关属性值。这种双向绑定使得DOM和ViewModel之间的通信更为流畅。而text绑定则是ViewModel到DOM的单向通道。

例如，以下HTML代码段展示了两个表单元素，它们通过data-bind属性与视图模型的属性进行value绑定：

```html

```

在对应的JavaScript代码中，我们定义了一个视图模型，其中包含了两个可观察的属性：userName和userPassword。

关于value绑定的一些技术细节值得特别注意。KnockoutJS会使用初始值来设置value绑定的元素。当有新值时，初始值将被覆盖。如果绑定的属性是监控属性（即使用了ko.observable创建），那么任何属性值的变化都会实时反映到DOM元素上。如果你的value绑定不是数值型或字符型数据，显示的文本内容将等同于yourParameter.toString()，因此最好还是绑定值型或字符型数据。

当用户编辑表单控件并移出焦点后，KnockoutJS会自动更新对应的视图模型的属性值。你还可以通过valueUpdate事件来控制这一行为。

关于valueUpdate，KnockoutJS定义了一系列的变化事件，其中最常用的是"input"、"keyup"、"keypress"和"afterkeydown"事件。这些事件在适当的时机触发，以确保视图模型与DOM元素之间的数据同步。

KnockoutJS是一个强大而灵活的JavaScript类库，能够帮助你轻松创建响应式用户界面。其表单value绑定功能为数据绑定提供了强大的支持，使得DOM和ViewModel之间的通信更为流畅和高效。关于KO框架中的valueAllowUnset属性以及与之相关的元素绑定

在前端开发中，对于表单元素与视图模型之间的数据绑定，KO框架为我们提供了许多实用的工具和属性。其中，valueAllowUnset这一属性在元素中的应用尤为引人注目。

想象一下这样的场景：你有一个下拉列表，希望其包含一些选项，但同时也希望有一个“无”或“请选择”的选项供用户选择。这时，valueAllowUnset属性就派上了用场。

一、关于valueAllowUnset属性

在KO框架中，当你为

元素使用value绑定时，如果你希望下拉列表可以选中一个空白或无关联的值，那么就需要用到valueAllowUnset属性。该属性允许你选择一个下拉列表中没有的值作为选中项。这对于那些希望在用户未进行选择时仍然保留一个默认或空白的选中状态的情况非常有用。

二、源码示例

假设你有一个包含三个国家的下拉列表，但你希望有一个“请选择”的选项供用户选择。你可以这样写：

```html

```

在你的视图模型中，你需要定义一个数组来保存国家列表和一个可观察的属性来保存选中的国家。例如：

```javascript

var viewModel = {

countries: ['日本', '玻利维亚', '新西兰'], // 国家列表

selectedCountry: ko.observable('拉脱维亚') // 可观察的属性来保存选中的国家

};

```

在上述例子中，由于设置了valueAllowUnset: true，所以即使“拉脱维亚”不在国家列表中，它仍然可以作为选中状态被保留。用户在选择其他选项后，选中的状态会同步更新到视图模型中。当用户未进行选择时，“请选择…”将被视为默认选中项。这正是valueAllowUnset属性的魔力所在。它不仅让下拉列表更加灵活，还使得视图模型与表单元素的交互更加流畅。除了元素外，KO框架还提供了许多其他绑定和属性供开发者使用，以满足各种复杂的前端开发需求。希望这些信息和示例能帮助你更好地理解KO框架中的valueAllowUnset属性以及与之相关的元素绑定机制。在KnockoutJS 3.X的世界里，表单的value绑定是一种强大的双向数据绑定机制，它允许开发者轻松地在视图和模型之间同步数据。让我们深入一下这种技术。

让我们看看第一个值绑定。在HTML代码中，`

`和``两个元素都与`firstValue`这个可观察对象（observable）绑定在一起。这意味着，当你在输入框中输入内容时，`firstValue`的值会实时更新，任何与这个值绑定的元素也会立即反映这些更改。这种双向数据绑定的机制确保了视图和模型之间的数据同步。

接下来是第二个值绑定。``这个输入框虽然也会显示`secondValue`的初始值（"hello, again"），但它并不响应任何后续的更改。这是因为`secondValue`不是一个可观察对象。也就是说，虽然它会被填充到文本框中，但如果它的值发生改变，这种改变并不会反映到视图上。这种绑定更多地是一种单向的：从模型到视图。

第三个值绑定稍微复杂一些。``这个输入框与`secondValue`的长度属性绑定在一起。这意味着，只有当`secondValue`的长度超过8个字符时，输入框才会显示内容。这是一种条件绑定的示例，常用于根据某些条件来显示或隐藏表单元素。在这里，它确保了只有当字符串长度超过8个字符时，输入框才会被激活。