在Knockout中绑定Json

时间:2015-10-19 09:34:01

标签: javascript json knockout.js

我必须绑定json类型的字段“city”:

{
"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"
            }
        ]
    }, ...

在'select'html中,通过淘汰赛。 我输入了代码:

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>

以便显示所有城市,但遗憾的是我什么都没得到!

我做错了什么?

戴夫

1 个答案:

答案 0 :(得分:3)

你的问题有点不清楚我希望这是你最后看到的。

查看:

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

<强>视图模型:

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

工作样本 here

如果您想在一个下拉菜单中显示所有城市,请检查 here