Knockout.js基本数据绑定查询

Question

I'm fundamentally unable to grasp the knockout.js concept of data-binds so looking for newbie help.

Funnily enough, the code is actually doing what I want it to. I just don't grasp why:

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


});

The issue

So my JSON data is displayed in a "koGrid" quite nicely. But when I try and duplicate the code to create a different table with a different JSON data-source, the tables do not display.

Should my data-bind be looking at "gridOptions"? Shouldn't it be a variable? Whenever I have tried putting the above JS in a variable or function I fail badly. For example:

New HTML

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

JS using function

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


});

This doesn't work, and I've also tried using var BLah = $.getJSON, etc etc

In my limited understanding of OOP, I thought calling GetData() would produce the same table? Can anyone point out where I've gone wrong? I've tried copying the way the functions work in the knockout.js tutorials - http://learn.knockoutjs.com/#/?tutorial=collections

Thanks...

Answer 1

Rather than trying to explain how data-binds and binding contexts work exactly, I'll try to suggest how to refactor your code to make it easier to grasp:

Judging from your api call, you're attempting to show some sort of overview of players. The overview has a list of players, and a list of selected players. It also has a load method that queries an API and writes to the list.

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

To render a grid, we need grid options. Let's make a 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;
}

Now, we can add a grid to our main viewmodel:

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

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

With this in place, your main app code will be:

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

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

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

The context of your view (html), is a PlayerOverview instance. All values referenced in data-binds should be properties of your viewmodel. For example:

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