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

這是因爲您的userOptions確實只包含字符串而不是包含值（boolean）和標題（string）的鍵值對對象。在你的HTML

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

然後：

試試這個

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