Knockout.js 布尔选择列表选项答案

【问题标题】：Knockout.js boolean select list optionsKnockout.js 布尔选择列表选项
【发布时间】：2016-01-11 16:50:48
【问题描述】：

我正在尝试创建一个使用 Knockout 绑定的下拉列表。下拉列表只有两个选项，但是，我要求选项的值是 true 和 false。

查看

@model WebApplication13.Models.IndexViewModel

@{
    ViewBag.Title = "Index";
}
<select data-bind="options: userOptions, value: userStatus, event: { change: selectionChanged }"></select>

@section Script {
    <script src="~/Scripts/scripts.js"></script>
    <script>

        var options = {
            userStatus: @(Model.IsNewUser ? "true" : "false"),
        };

        var viewModel = init(options);
        ko.applyBindings(viewModel);

    </script>
}

Javascript

function init(options) {

    var viewModel = {
        userStatus: ko.observable(options.userStatus),
        userOptions: ko.observableArray(['New User', 'Old User'])
    };

    viewModel.selectionChanged = function(event) {
        alert(viewModel.userStatus());
    } 

    return viewModel;
};

但是，当我选择“新用户”或“旧用户”时，“userStatus”的值是“新用户”或“旧用户”，而不是真或假。不知道我做错了什么，任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

那是因为您的 userOptions 确实只包含字符串，而不是包含值 (boolean) 和标题 (string) 的键值对对象。

试试这个：

userOptions: ko.observableArray([
      { value: true, caption: 'New User' },
      { value: false, caption: 'Old User' }
])

然后在你的 HTML 中：

<select data-bind="options: userOptions,
                   optionsValue: 'value',
                   optionsText: 'caption',
                   value: userStatus,
                   event: { change: selectionChanged }">

见Documentation和Fiddle

【讨论】：

【解决方案2】：

使用optionsText 绑定来确定<select> 中显示的文本应该是什么。

<select data-bind="options: userOptions, optionsText: textForOption, value: userStatus, event: { change: selectionChanged }"></select>

var viewModel = {
        userStatus: ko.observable(options.userStatus),
        userOptions: ko.observableArray(['true', 'false']),
        textForOption: function (option) {
            if (option === 'true') {
                return 'New User';
            } else {
                return 'Old User';
            }
        },
    };

【讨论】：