knockout.js 数据绑定到下拉菜单会覆盖原始值答案

【问题标题】：knockout.js data-binding to dropdown overwrites original valueknockout.js 数据绑定到下拉菜单会覆盖原始值
【发布时间】：2012-06-05 14:02:26
【问题描述】：

我有一个函数可以将一个对象放入一个名为“detailedStudent”的可观察对象中，它将以模式显示学生的一些字段。问题来了：

我从一个值为 false 的字段开始。 (IncludeInStudentSiteResults)
我在“detailedStudent”中设置了“student”对象，该对象显示下拉列表（模拟模式弹出窗口）。
该字段的值设置为 true，这是下拉列表中的第一个选项。

这是一个重现问题的 jsFiddle：http://jsfiddle.net/62fDB/16/

【问题讨论】：

标签： data-binding knockout.js observable

【解决方案1】：

下拉选项值是字符串（不是布尔值）。像这样更新你的数据初始化

...
"IncludeInStudentSiteResults": "false",
...

JSfiddle:http://jsfiddle.net/62fDB/22/

或使用以下帖子Knockoutjs (version 2.1.0): bind boolean value to select box中的解决方案

【讨论】：

这当然很有帮助，也是朝着正确方向迈出的一步，但布尔值会自动序列化为 JSON 作为布尔值。有没有将布尔值作为下拉选项值的首选方式？
这可能对Knockoutjs (version 2.1.0): bind boolean value to select box有帮助

【解决方案2】：

这是你的版本：

function StudentViewModel() {
    var self = this;
    this.students = ko.observableArray([]);
    this.detailedStudent = ko.observable();

    this.clickMe = function(student) {
        alert(student.IncludeInStudentSiteResults());
        self.detailedStudent(student);
        alert(student.IncludeInStudentSiteResults());
    }
}

尝试使用我的版本：

function StudentViewModel() {
    var self = this;
    this.students = ko.observableArray([]);
    this.detailedStudent = ko.observable();

    this.clickMe = function(student) {
        alert(student.IncludeInStudentSiteResults());
        self.detailedStudent(ko.observable(student));
        alert(student.IncludeInStudentSiteResults());
    }
}

JSfiddle：http://jsfiddle.net/62fDB/23/

【讨论】：

您的版本的问题是detailedStudent 永远不会被绑定，因此下拉菜单永远不会出现在页面上。
使用您更新的修复程序，我得到一个非常常见的控制台 JavaScript 错误：无法解析绑定。消息：ReferenceError：未定义 IncludeInStudentSiteResults；绑定值：值：IncludeInStudentSiteResults

【解决方案3】：

这是一个包含我的问题答案的小提琴。我不喜欢我必须编写自定义绑定，但替代方法是使用枚举而不是数据绑定到布尔值。

http://jsfiddle.net/ekyDh/2/

【讨论】：