Knockout.js boolean select list options

Question

Я пытаюсь создать раскрывающийся список, который привязывает с помощью Knockout. В раскрывающемся списке есть только два варианта, однако мне нужно, чтобы значения для параметров были истинными и ложными.

Посмотреть

@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; 
}; 

Однако, когда я выбираю либо 'Новый пользователь' или 'Old User', значение 'userStatus' является 'Новый пользователь' или «Старый User ', а не true или false. Не уверен, что я делаю неправильно, любая помощь будет очень признательна.

Answer 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

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