淘汰赛显示来自选择的数据

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.