淘汰赛映射。我无法让我的 json 正确连接并进入选择下拉列表答案

【问题标题】：knockoutjs mapping. I can't get my json to hook up properly and into a select dropdown淘汰赛映射。我无法让我的 json 正确连接并进入选择下拉列表
【发布时间】：2012-10-29 05:32:47
【问题描述】：

我是淘汰赛和 mvc 的新手。我试图查看来自淘汰赛和复数视力的许多文档，但我似乎无法将所有内容放在一起。这是我所拥有的：我有一个从我的 api 返回的 json 数据：

[{
ID: 1,
LongName: "My Long Name",
ShortName: "Long",
Rank: 10
},
{
ID: 2,
LongName: "My second long name",
ShortName: "Short",
Rank: 20
}]

在我的 javascript 中我有：

<script type="text/javascript">
    $(function () {
        $.getJSON("../api/myData", function (data) {
            alert(data[0].ID);
        });
    });
</script>

我想创建一个从我的 json 数据（longname 和 id）中填充的下拉菜单。当用户选择时，另一个菜单会根据选择动态填充。我还使用 Knockout 映射器脚本吗？请帮忙。谢谢

【问题讨论】：

标签： knockout.js asp.net-mvc-4 knockout-mapping-plugin

【解决方案1】：

这是一个可以帮助你的示例小提琴。

http://jsfiddle.net/jearles/LpwgQ/

UI 首先通过 AJAX 调用加载 Options 下拉列表。加载后，您可以选择其中一个选项，这将触发子选项的加载。选择选项 1，它将加载一组子选项，切换到选项 2，它将加载一组不同的子选项。将初始选项切换回“默认”，第二个菜单将消失。

在我的代码中，我确实使用了mapping 插件。它使将返回的 JSON 转换为 observables 和 observableArrays 的工作变得非常容易。是否使用它取决于您的要求。

HTML

<select data-bind="options: options, optionsText: 'LongName', optionsValue: 'ID', value: selectedOption, optionsCaption: '-Select-'"></select>

您使用 Knockout 绑定将返回的选项映射到选择。有关详细信息，请参阅Options Binding。 options 指向选项数组，optionsText 告诉 Knockout 使用哪个属性作为文本，optionsValue 将填充该值，value 是选择选项时 Knockout 将设置的可观察值，@987654330 @ 在没有选择时提供文本。

通过订阅selectedOption，您可以在它发生变化时做出反应，如果需要加载子选项，可以进行另一个 AJAX 调用。

self.selectedOption.subscribe(function(newValue) {
    // Reset the suboptions
    self.suboptions([]);

    // If we have selected an option go get the suboptions
    if (newValue) {
      ...
    }
});

【讨论】：