Question

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

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'，但是将timeout设置为函数定义。它必须以这种方式工作：

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);

});

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

1 个答案: