Javascript Knockout.js基本数据绑定查询

我根本无法理解knockout.js的数据绑定概念，因此需要新手帮助

有趣的是，代码实际上正在做我希望它做的事情。我只是不明白为什么：

HTML

问题

因此，我的JSON数据在koGrid中显示得非常好。但是，当我尝试复制代码以使用不同的JSON数据源创建不同的表时，这些表不会显示出来

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

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

新HTML

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

在我对OOP的有限理解中，我认为调用GetData会产生相同的表？有人能指出我哪里出了错吗？我尝试复制knockout.js教程中函数的工作方式-

---

谢谢…

我不想解释数据绑定和绑定上下文是如何准确工作的，我将尝试建议如何重构代码，使其更易于掌握：

从您的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);
};

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

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

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实例。数据绑定中引用的所有值都应该是viewmodel的属性。例如：

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

---

尝试使用类似于ko.applyBindingsself、document.getElementById'newgrid2'的内容更新第二个grid js this，我想它终于被点击了，现在我可以看到教程的内容了。非常好的回答，谢谢你抽出时间。

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

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