敲除显示选择的数据

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。