knockout.js - knockout 显示选择数据

Question

我正在使用 knockout 来创建选择列表。每个选择项都是一个包含几个变量的对象。当选择一个项目时，我想在 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 绑定(bind)不起作用的原因。

要修复此问题，只需删除 optionsValue: 'MonthNumber',，当您更改选择时，KO 将使用整个对象:

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

演示 JSFiddle .