Javascript 将json绑定列表敲除到单击的listitem

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

我对knockout和JS比较陌生，所以我可能做错了什么（我根据knockout的实例成功地做到了这一点，但这些示例使用的是select，我似乎无法在ul上使用它）

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

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>

选定大陆：文本

这是小提琴

---

另外，如果我遗漏了什么，或者不需要什么，请指出，或者提供进一步研究的链接；）

您尝试将大陆值设置为字符串，然后尝试迭代字符串。您需要做的是将大陆设置为数据

大概是这样的：

self.selectedContinent(data);

在这里拉小提琴。

只是补充一下，我以前没有使用过击倒，所以我的解决方案可能不是最好的

self.selectedContinent(data);