敲除顯示選擇的數據

Question

我正在使用敲除來創建選擇列表。每個選擇項都是一個包含一對變量的對象。當選擇一個項目時，我想在span中顯示所選對象的另一個變量。

該選擇有效，但沒有數據顯示在包含data1:文本的範圍中。

任何想法？

小提琴這裏：http://jsfiddle.net/e24zoyp6/

代碼： JS

var _ViewModel = {}; 

$(document).ready(function() { 
    setupView(); 
}); 

function setupView() { 
    var Month = function (longName, shortName, value) { 
     this.ShortName = shortName; 
     this.MonthName = longName; 
     this.MonthNumber = value; 
    }; 

    _ViewModel = { 
     // These are the initial options 
     monthSelection: ko.observableArray([ 
      new Month("January", "Jan", 1), 
      new Month("February", "Feb", 2), 
      new Month("March", "Mar", 3) 
     ]), 
     SelectedMonth: ko.observable() 
    }; 

    ko.applyBindings(_ViewModel); 
} 

的Html

<select data-bind=" 
    options: monthSelection, 
    optionsText: 'MonthName', 
    optionsValue: 'MonthNumber', 
    value: SelectedMonth, 
    optionsCaption: 'Which Month?'">    
</select> 

<div data-bind="visible: SelectedMonth"> data1: 
    <span data-bind="text: SelectedMonth() ? SelectedMonth().ShortName : 'unknown'"></span> 
</div> 

Answer 1

您目前正在使用MonthNumber爲您optionsValue。這意味着您的SelectedMonth將只包含月份的編號，而不包含整個Month對象，因此您的text綁定不起作用。

要修復它只是刪除optionsValue: 'MonthNumber',，當你改變選擇KO將使用整個對象：

<select data-bind=" 
    options: monthSelection, 
    optionsText: 'MonthName', 
    value: SelectedMonth, 
    optionsCaption: 'Which Month?'">    
</select> 

演示JSFiddle。