Question

我从根本上无法掌握数据绑定的kickout.js概念，因此需要新手帮助。

有趣的是，代码实际上正在执行我想要的事情。我只是不明白为什么：

HTML

<div class = "gridStyle2" data-bind="koGrid: gridOptions"></div>

JS

    $.getJSON('http://127.0.0.1:8000/home/players/', function(playerdata) {

var self = this;
        this.myData = ko.observableArray(playerdata);
        this.mySelectedData = ko.observableArray([]);
        this.gridOptions = { data: self.myData,
                            columnDefs: [{ field: 'ShortName', displayName: 'Name', width: 100 },
                                         { field: 'CurrentVal', displayName: 'Value', width: 70 },
                                         { field: 'ShortClub', displayName: 'Club', width: 60 },
                                         { field: 'ShortPos', displayName: 'Position', width: 70 },
                                        ],

                            selectedItems: this.mySelectedData,

         };

ko.applyBindings(self, document.getElementById('newgrid'));


});

问题

所以我的JSON数据很好地显示在“ koGrid”中。但是，当我尝试复制代码以使用不同的JSON数据源创建不同的表时，这些表将不会显示。

我的数据绑定是否应该查看“ gridOptions”？应该不是变量吗？每当我尝试将上述JS放入变量或函数中时，我都会失败。例如：

新HTML

<div class = "gridStyle2" data-bind="koGrid: GetData()"></div>

JS使用功能

function GetData() {

$.getJSON('http://127.0.0.1:8000/home/players/', function(playerdata) {

var self = this;
        this.myData = ko.observableArray(playerdata);
        this.mySelectedData = ko.observableArray([]);
        this.gridOptions = { data: self.myData,
                            columnDefs: [{ field: 'ShortName', displayName: 'Name', width: 100 },
                                         { field: 'CurrentVal', displayName: 'Value', width: 70 },
                                         { field: 'ShortClub', displayName: 'Club', width: 60 },
                                         { field: 'ShortPos', displayName: 'Position', width: 70 },
                                        ],

                            selectedItems: this.mySelectedData,
                            multiSelect: false,
                            showFilter: false,
                            jqueryUITheme: true,
                            rowHeight: 22,
                            displaySelectionCheckbox: false,
         };

}

ko.applyBindings(GetData(), document.getElementById('newgrid'));


});

这不起作用，我也尝试使用var BLah = $ .getJSON等

在对OOP的有限理解中，我认为调用GetData（）会产生相同的表？谁能指出我哪里出问题了？我已经尝试过在敲门js教程-http://learn.knockoutjs.com/#/?tutorial=collections

中复制函数的工作方式

谢谢...

Answer 1

除了尝试解释数据绑定和绑定上下文的工作原理之外，我将尝试建议如何重构代码以使其更容易理解：

从您的api调用来看，您试图显示某种类型的播放器概述。概述包含一个播放器列表和一个选定的播放器列表。它还有一个load方法，用于查询API并写入列表。

function PlayerOverview() {
  this.playerData = ko.observableArray([]);
  this.selectedPlayers = ko.observableArray([]);
};

PlayerOverview.prototype.loadPlayers = function() {
  $.getJSON('http://127.0.0.1:8000/home/players/', this.playerData);
};

要渲染网格，我们需要网格选项。让我们做一个PlayerGrid：

function PlayerGrid(dataSource, selectionSource) {
  this.data = dataSource;
  this.selectedItems = selectionSource;

  this.columnDefs = [
    { field: 'ShortName', displayName: 'Name', width: 100 },
    { field: 'CurrentVal', displayName: 'Value', width: 70 },
    { field: 'ShortClub', displayName: 'Club', width: 60 },
    { field: 'ShortPos', displayName: 'Position', width: 70 },
  ];

  this.multiSelect = false;
  this.showFilter = false;
  this.jqueryUITheme = true;
  this.rowHeight = 22;
  this.displaySelectionCheckbox = false;
}

现在，我们可以将网格添加到主视图模型中：

function PlayerOverview() {
  this.playerData = ko.observableArray([]);
  this.selectedPlayers = ko.observableArray([]);

  // For rendering a grid UI:
  this.playerGrid = new PlayerGrid(this.playerData, this.selectedPlayers);
};

完成此操作后，您的主要应用代码将为：

// Instantiate an overview
const playerApp = new PlayerOverview();

// Bind the UI
ko.applyBindings(playerApp);

// Make sure the data gets loaded
playerApp.loadPlayers();

视图（html）的上下文是一个PlayerOverview实例。数据绑定中引用的所有值都应该是视图模型的属性。例如：

<h1>
  Nr. of players: <span data-bind="text: playerData().length"></span>
</h1>
<h2>Grid:</h2>
<div data-bind="koGrid: gridOptions"></div>

Knockout.js基本数据绑定查询

1 个答案: