Question

我正在使用knockout创建一个选择列表。每个选择项都是一个包含几个变量的对象。选择项目时，我想在span中显示所选对象中的另一个变量。

选择有效但在包含data1:文本的范围内不显示任何数据。

有什么想法吗？

代码： 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。

Knockout显示来自选择

1 个答案: