完整代码

<select data-bind="options: items, 
optionsText: 'name', 
optionsValue: 'id',
value: selectedItem"></select>

<div data-bind="text: selectedItem"></div>
Name : <div data-bind="text: selectedItem().name"></div>

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
}


var viewModel = {
    selectedItem: ko.observable(),
    items: ko.observableArray([new Item(1, "pencil"),
                               new Item(2, "pen"),
                               new Item(3, "marker"),
                               new Item(4, "crayon")]),
    name:ko.observable()
};

ko.applyBindings(viewModel);

setTimeout(function() {
    viewModel.selectedItem(3);
}, 1000);

我希望当用户选择钢笔或铅笔时，应该用div显示单词钢笔或铅笔文字。在哪里我犯了错误，我没有得到我的输出。感谢

修改

我有一个基本问题，因为我是knockoutjs的新手。当我们用下面的代码绑定下拉列表....那么那是什么发生了吗？

<select data-bind="options: items, 
optionsText: 'name', 
optionsValue: 'id',
value: selectedItem"></select>

1）options: items 它意味着存储在项目中的任何内容datasource for dropdown .....我是对的吗？

2）optionsText: 'name', 它意味着只显示来自datasource的名字.....我是对的吗？

3）optionsValue: 'id' 它意味着id将被存储为内部使用的值.....我是对的吗？

4）value: selectedItem 它表示所选数据将存储在selectedItem。

中

假设我将员工姓名显示为drodown文本，员工ID显示为drodown值，然后用户

选择任何员工姓名，然后带有id的员工姓名将存储在selectedItem属性中.......我是对的吗？

请指导我。感谢

Answer 1

问题是因为您告诉select绑定使用id属性作为optionsValue，因此只有每个项目的ID存储在selectedItem中，而是而不是Item本身。如果删除它，并更新第一个div以绑定到selectedItem().id，它将按预期工作：

＆＃13;

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
}


var viewModel = {
    selectedItem: ko.observable(),
    items: ko.observableArray([new Item(1, "pencil"),
                               new Item(2, "pen"),
                               new Item(3, "marker"),
                               new Item(4, "crayon")]),
    name:ko.observable()
};

ko.applyBindings(viewModel);

setTimeout(function() {
    viewModel.selectedItem(viewModel.items()[2]);
}, 1000);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: items, 
optionsText: 'name', 
value: selectedItem"></select>

<div data-bind="text: selectedItem().id"></div>
Name : <div data-bind="text: selectedItem().name"></div>

＆＃13;

关于你的编辑：

1＆amp; 2 - 是的。使用3：当您为optionsValue绑定指定select时，这意味着当选择某个项目时，knockout将使用optionsValue中指定的属性值（您的ID） case）作为选择列表的实际值。然后将其推送到您在value选项中指定的可观察量。

4：选择列表的值将存储在value选项指定的observable中。值的含义由select绑定中指定的选项定义。如上面3中所述，如果您告诉knockout使用绑定对象的特定属性，那将是存储的内容。在您的示例中，数字ID是进入的内容，因此您没有指向要在第二个div中显示的name属性的链接。如果您没有指定optionsValue，则会将所选的实际项目对象分配给该值，这意味着您可以访问其他位置的所有属性。

如何使用knockout js

完整代码

修改

1 个答案: