当viewModel更改时刷新Knockout绑定

Question

我试图更新JavaScript视图模型，只要通过对服务器进行ajax调用来单击按钮，并且页面在第一次单击后似乎没有选择新分配的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

我已更新您的fid经过若干修改和注释的DLE修复与如何遵循淘汰赛惯例，以及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>