淘汰js json绑定列表到点击的listitem答案

【问题标题】：knockout js json bind list to clicked listitem淘汰js json绑定列表到点击的listitem
【发布时间】：2014-04-18 16:39:34
【问题描述】：

我想按大陆/国家/州/等选择特定位置。我得到了一个 JSON，并设法显示/选择了大陆，但我无法获得要填充的国家列表。

我对淘汰赛和 JS 相当陌生，所以我可能做错了什么（我设法根据淘汰赛的现场示例做到了这一点，但那些正在使用 select，我似乎无法让它在 ul 上工作)

JSON（手工编写，因此可能有错误）

var Continent = [
        { Name: "Europe", Countries: [{ Name: "England", ID: 1 }, { Name: "Wales", ID: 2 }] },
        { Name: "America", Countries: [{ Name: "US", ID: 3 }, { Name: "Canada", ID: 4 }] },
        { Name: "Asia", Countries: [{ Name: "India", ID: 5 }, { Name: "China", ID: 6 }] }
];

javascript：

var locationVM = function () {
    var self = this;

    self.selectedContinent = ko.observable("none");
    self.selectedCountry = ko.observable();

    self.selectedContinent.subscribe(function () {
        self.selectedCountry(undefined);
    });

    self.onClickContinent = function (data) {
        self.selectedContinent(data.Name);
    };
};

ko.applyBindings(new locationVM());

HTML

<div>
    <ul data-bind="foreach: Continent">
        <li data-bind="text: Name, click: $parent.onClickContinent" />
    </ul>
</div>Selected Continent : <span data-bind="text: selectedContinent">text</span>

<div data-bind="with: selectedContinent">
    <ul data-bind="foreach: Countries">
        <li data-bind="text: Name" />
    </ul>
</div>

这是小提琴http://jsfiddle.net/norbert/WB46V/

另外，如果有什么我遗漏的或不需要的，请指出，或提供进一步学习的链接；）

【问题讨论】：

标签： javascript json data-binding knockout.js binding

【解决方案1】：

您正在尝试将大陆值设置为字符串，然后尝试遍历该字符串。您需要做的是将大陆设置为数据。

类似这样的：

self.selectedContinent(data);

在这里工作的小提琴。 http://jsfiddle.net/WB46V/6/

补充一下，我之前没有使用过淘汰赛，所以我在小提琴中的解决方案可能不是最好的。

【讨论】：