javascript - Knockout.js bool 选择列表选项

Question

我正在尝试创建一个使用 Knockout 进行绑定(bind)的下拉列表。下拉列表只有两个选项，但是，我要求选项的值是 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;
};

但是，当我选择“New User”或“Old User”时，“userStatus”的值是“New User”或“Old User”，而不是 true 或 false。不确定我做错了什么，我们将不胜感激。

Answer 1

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

试试这个:

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