javascript - Knockout.js 映射插件如何更新数据

Question

以下代码将获取 JSON 数据并将其正确绑定(bind)到 View ，但是当我获取更新的数据时， View 不会更新。数据已更改但 View 未更新。任何想法我做错了什么？我无法理解映射插件的工作原理。

jQuery(document).ready(function() {

setInterval(LeaderboardViewModel, (10 * 500));

function LeaderboardViewModel() {
    var self = this;

    this.ArrayOfPlayers = ko.mapping.fromJS([]);

    $.ajax({
        type: 'GET',
        url: 'http://localhost:5500/leaderboard/',
        context: this,
        success: function(data) {
          self.SuccessfullyRetrievedModelsFromAjax(data);
        },
        dataType: 'json'
    });

    this.SuccessfullyRetrievedModelsFromAjax = function(data) {
        var array = $.map(data.leaderboard, function(value, index) {
            return [value];
        });

        console.log(array);
        ko.mapping.fromJS(array, {}, self.ArrayOfPlayers);  
    };
}

ko.applyBindings(new LeaderboardViewModel());

});

以下 HTML 在我加载页面时正确呈现数据:

<tbody data-bind="foreach: ArrayOfPlayers">

编辑:当我加载页面时它工作正常。设置间隔部分不起作用。

获取数据:

{
  "leaderboard": {
"1": {
  "deaths": 52, 
  "game_count": 13, 
  "game_defeats": 0, 
  "game_deserts": 0, 
  "game_draws": 0, 
  "game_wins": 13, 
  "id": 2, 
  "kills": 78, 
  "level": 8, 
  "rank": 1, 
  "xp": 3260
}, 
"10": {
  "deaths": 78, 
  "game_count": 13, 
  "game_defeats": 13, 
  "game_deserts": 0, 
  "game_draws": 0, 
  "game_wins": 0, 
  "id": 1, 
  "kills": 52, 
  "level": 5, 
  "rank": 10, 
  "xp": 1570
}, 
}

编辑 2:没有控制台错误。

Answer 1

那是因为你在 applyBinding 中使用了关键字 'new'，但是在函数定义中设置了超时。它必须以这种方式工作:

jQuery(document).ready(function() {

function LeaderboardViewModel() {
    var self = this;
    this.ArrayOfPlayers = ko.mapping.fromJS([]);

    this.SuccessfullyRetrievedModelsFromAjax = function(data) {
        var array = $.map(data.leaderboard, function(value, index) {
            return [value];
        });

        console.log(array);
        ko.mapping.fromJS(array, {}, self.ArrayOfPlayers);  
    };

    self.UpdateMappings = function(){
         $.ajax({
             type: 'GET',
             url: 'http://localhost:5500/leaderboard/',
             context: this,
             success: function(data) {
               self.SuccessfullyRetrievedModelsFromAjax(data);
             },
             dataType: 'json'
        });
    };      
}

var viewModel = new LeaderboardViewModel();
setInterval(viewModel.UpdateMappings, (10 * 500));

ko.applyBindings(viewModel);

});