如何使用淘汰赛js在两个控件之间建立关系

Posted 2023-03-27

【中文标题】如何使用淘汰赛js在两个控件之间建立关系

【英文标题】：How to make relation between two control using knockout js

【发布时间】：2015-08-17 12:56:43

【问题描述】：

我有一个包含数据的下拉菜单，我希望在更改下拉数据时将下拉文本填充到 div 中。我已经完成了，但代码没有按预期工作。

完整代码

<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 属性中......我说得对吗？

请指导我。谢谢

【参考方案1】：

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

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);

<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>

关于您的编辑：

1 和 2 - 是的。带3：当你为select绑定指定optionsValue时，表示当一个item被选中时，knockout会使用optionsValue中指定的属性值（你的情况下的ID）作为实际值对于选择列表。然后将其推送到您在 value 选项中指定的 observable。

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

【讨论】：

希望你注意到这条线 viewModel.selectedItem(3); 停止工作。通过那条线，我正在按 id 选择数据。所以告诉我如何做同样的事情。谢谢

@Thomas 抱歉，错过了这一点 - 现在已经更新了。它从视图模型中读取实际的Item 并将selectedItem 设置为它。

我是 knockoutjs 的新手，所以我仍然有很多困惑。所以我问了几个问题。请看看我的编辑部分。如果可能的话，请查看并回答这可以消除我的困惑。谢谢

如果我确实指定了optionsValue: 'id',，这是否意味着当用户从下拉列表中选择数据时，值部分只会存储在 selectedItem 中，或者如果我们没有在绑定时间指定 optionsValue....这是否意味着当用户从下拉列表中选择数据，然后下拉文本和值都将存储在 selectedItem 属性中？如果我错了，请纠正我。谢谢

@Thomas 已经编辑了我的答案以掩盖你的观点 - 这清楚了吗？