Knockout.js 基本数据绑定查询

Question

我根本无法掌握数据绑定的 knockout.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() 会生成相同的表？谁能指出我哪里出错了？我已经尝试复制函数在 knockout.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>