Question

我试图通过对服务器进行ajax调用来点击按钮时更新javascript视图模型，并且在第一次单击后页面似乎没有选择新分配的viewmodel。

我有一个示例jsfiddle here

以下是我的简单viewModel

var viewModel = {
model: null
};

按钮单击事件处理程序，我确保只调用一次应用绑定

$('#btnSearch').click(function () {
    // In actual scenario this data is returned from server side code
    var playerData = searchPlayers($('#drpCountry').val());
    // Data returned from server is then assigned to viewModel
    viewModel.model = playerData;
    if ($('#hdnKOHasBinded').val() === '0') {
        ko.applyBindings(viewModel);
        $('#hdnKOHasBinded').val('1');
    }
});

请帮忙

Answer 1

我已经通过一系列更改和评论来更新您的小提琴，以解决如何遵循淘汰赛规则以及javascript约定的问题：http://jsfiddle.net/azurelogic/NsKPQ/2/

JS：

//Capitalize your object constructors if they are supposed to be created with 'new'
function Player(name, age) {
    //these would still work if they were like this: this.name = name;
    //they only need to be observable if you plan to change
    //one of the properties without swapping out the whole object
    this.name = ko.observable(name);
    this.age = ko.observable(age); 
}

function searchPlayers(country) {
    var players = null;
    if (country === 'spain') {
        players = [
        new Player('Nadal', 28),
        new Player('Ferrer', 32),
        new Player('Lopez', 29)];
    } else if (country === 'swiss') {
        players = [
        new Player('Federer', 32),
        new Player('Wawiranka', 28)];
    }
    return players;
}

var viewModel = {
    //changed the name from model to players and made the array observable. This is what drives your ability to update the DOM
    players: ko.observableArray()
};

$(function () {
    $('#btnSearch').click(function () {
        // In actual scenario this data is returned from server side code
        var playerData = searchPlayers($('#drpCountry').val());
        // Data returned from server is then assigned to viewModel
        viewModel.players(playerData);
    });

});

//Just go ahead and apply bindings immediately
ko.applyBindings(viewModel);

HTML：

<div>
    <select id="drpCountry">
        <option value="spain">spain</option>
        <option value="swiss">swiss</option>
    </select>
</div>
<input type="button" id="btnSearch" value="Search" />
<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: players">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: age"></td>
        </tr>
    </tbody>
</table>

当viewModel更改时刷新Knockout绑定

1 个答案: