Question

我想按大陆/国家/州/等选择一个特定的地点。我得到了一个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/

此外，如果我遗漏或不需要任何内容，请指出，或提供进一步研究的链接;）

Answer 1

您正在尝试将continent值设置为字符串，然后尝试通过字符串进行迭代。您需要做的是将大陆设置为数据。

这样的事情：

self.selectedContinent(data);

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

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

淘汰js json绑定列表点击listitem

1 个答案: