javascript - 在 Knockout 中绑定(bind) Json

Question

我必须绑定(bind) json 类型的“城市”字段:

{
"italia": [
    {
        "regione": "Abruzzo",
        "capoluoghi": [
            {
                "citta": "Chieti",
                "sigla": "CH"
            },
            {
                "citta": "L'Aquila",
                "sigla": "AQ"
            },
            {
                "citta": "Pescara",
                "sigla": "PE"
            },
            {
                "citta": "Teramo",
                "sigla": "TE"
            }
        ]
    },{
        "regione": "Basilicata",
        "capoluoghi": [
            {
                "citta": "Matera",
                "sigla": "MT"
            },
            {
                "citta": "Potenza",
                "sigla": "PZ"
            }
        ]
    }, ...

在“选择”html 中，通过 knockout 。 我输入了代码:

self.provincia = ko.mapping.fromJS([]);
$.getJSON("italia.json", function (data) {
        ko.mapping.fromJS(data.italia, {}, self.provincia)
    })

在 html 中:

    <div  data-bind="with: provincia">
<select class="mm-menu__link" id="Provincia" data-bind:"foreach: capoluoghi">
                    <option data-bind="text:citta"></option>
                </select>
                    </div>

以便显示所有城市，但不幸的是我一无所获!

我做错了什么？

戴夫

Answer 1

虽然你的问题有点不清楚，但我希望这是你最终看到的。

View :

<div data-bind="foreach: provincia">
    <select class="mm-menu__link" id="Provincia" data-bind="foreach: capoluoghi">
        <option data-bind="text:citta"></option>
    </select>
</div>

View 模型:

var ViewModel = function () {
    var self = this;
    self.provincia = ko.observable();
    ko.mapping.fromJS(json.italia, {}, self.provincia)
};
ko.applyBindings(new ViewModel());

工作样本 here

如果您想在一个下拉列表中显示所有城市，请选中 here