knockout.js - 使用从服务器接收的 JSON 数据更新 View 模型时刷新 Knockout 绑定(bind)

Question

我有一个 knockout View 模型，每次单击按钮时都会使用从服务器接收的 JSON 数据进行更新，并且希望根据 viewModel 的更改刷新绑定(bind)。我正在使用 knockout 映射将 JSON 转换为 KO 可观察量。

我的问题是，当单击按钮更新 View 模型时，绑定(bind)不会刷新

样本 fiddle 是 here

JS:

    function getPlayersAsJSON(country) {
    var players = null;
    if (country === 'spain') {
        players = $('#spainText').val();
    } else if (country === 'swiss') {
        players = $('#swissText').val();
    }
    return players;
}

var viewModel = {
    players: ko.observableArray()
};

$(function () {
    $('#btnSearch').click(function () {
        var playerDataJSON = getPlayersAsJSON($('#drpCountry').val());
        var playerData = ko.mapping.fromJSON(playerDataJSON);
        console.log(playerDataJSON);
        console.log(playerData);
        console.log(playerData());
        viewModel.players(playerDataJSON);
    });
});

ko.applyBindings(viewModel);

HTML:

    <div>JSON Data for Spain
    <br/>
    <textArea id="spainText" rows="4" cols="50">[{"Name": "Nadal","Age": 28},{"Name": "Ferrer","Age": 32},{"Name": "Ferrer", "Age": 29}]</textArea>
    <br/>JSON Data for Swiss
    <br/>
    <textArea id="swissText" rows="4" cols="50">[{"Name": "Federer","Age": 32},{"Name": "Wawiranka", "Age": 28}]</textArea>
</div>
<br/>
<div>Select Country
    <br/>
    <select id="drpCountry">
        <option value="spain">spain</option>
        <option value="swiss">swiss</option>
    </select>
</div>
<input type="button" id="btnSearch" value="Search" />
<br/>
<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: players">
        <tr>
            <td data-bind="text: $data.Name"></td>
            <td data-bind="text: $data.Age"></td>
        </tr>
    </tbody>
</table>

如果您需要更多详细信息，请告诉我

Answer 1

如果输入是数组，则 ko.mapping.fromJSON 将返回 ko.observableArray。

因此，您需要编写 playerData() 来解开可观察数组，否则最终您的 players 可观察数组将包含另一个可观察数组:

var playerData = ko.mapping.fromJSON(playerDataJSON);
viewModel.players(playerData()); //unwrap the playerData 

演示 JSFiddle .

作为替代解决方案，如果输入是 JSON 数组，映射插件支持直接填充已存在的可观察数组，语法如下:

ko.mapping.fromJSON(playerDataJSON, {} /* empty options */, viewModel.players);

演示 JSFiddle .