How does a Magento 2 Grid Cell get it's value?

Question

Looking at the customer grid in Magento 2's backend, it's not 100% clear to me how Magento's javascript code populates values in grid cells.

For example, it appears the view model constructor for the Name cell is

Magento_Ui/js/grid/columns/column

and this cell has a header and body KnockoutJS template of

Knockout.js headerTmpl: ui/grid/columns/text
Knockout.js bodyTmpl: ui/grid/cells/text    

If I look at the source file for the text cell body template

#File: vendor/magento/module-ui/view/base/web/templates/grid/cells/text.html    
<div class="data-grid-cell-content" text="$col.getLabel($row())"/>    

It's not 100% clear how the value for the cell is rendered. The div itself is empty, and even if we expand the text="" attribute into native KnockoutJS

<div xmlns="http://www.w3.org/1999/xhtml" class="data-grid-cell-content" data-bind="text: $col.getLabel($row())"></div>

It's still not clear what's going on. There's a text binding that will set a value -- but it's not clear where the object in $col or $row come from.

Has anyone dug through this to figure out what's going on?

Answer 1

It looks like the answer here is -- you need to remember that those templates are usually called by a parent template, and that parent template can define variables in the sub-templates. For example, consider this template further up the tree

#File: vendor/magento/module-ui/view/base/web/templates/grid/listing.html
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
    <table class="data-grid" data-role="grid">
       <thead>
            <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
        </thead>
        <tbody>
            <tr class="data-row" repeat="foreach: rows, item: '$row'" css="'_odd-row': $index % 2">
                <td outerfasteach="data: getVisible(), as: '$col'"
                    css="getFieldClass($row())" click="getFieldHandler($row())" template="getBody()"/>
            </tr>
            <tr ifnot="hasData()" class="data-grid-tr-no-data">
                <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
            </tr>
        </tbody>
    </table>
</div>

This template foreaches over its view model data and defines a $col variable that (should?) be available to sub-templates.