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 数据源创建不同的 table 时，table 不会显示。

我的数据绑定应该查看 "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() 会产生相同的结果 table？谁能指出我哪里出错了？我尝试复制 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>

Knockout.js 基本数据绑定查询

Knockout.js basic data-bind query

javascript

knockout.js