Knockout.js布尔选择列表选项

Question

我正在尝试创建一个使用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 ”的值为“新用户”或“旧用户”，而不是真或假。 不知道我做错了什么，任何帮助将不胜感激。

Answer 1

使用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';
            }
        },
    };

Answer 2

那是因为你的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 }">

请参阅文档和小提琴