javascript - 为google.visualization.datatable创建高级的KnockOut绑定(bind)处理程序

由于这个tutorial ，我设法为Google的DataTable创建了一个KnockOut绑定处理程序。
到目前为止，这是我的绑定处理程序：

ko.bindingHandlers.dataTable = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var table = new google.visualization.Table(element);
        ko.utils.domData.set(element, "dataTable", table);
    },

    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());

        // Get options:
        var options = allBindings.get("tableOptions") || {};
        // Default options:
        options.width = options.width || "200px";
        options.height = options.height || "200px";
        options.showRowNumber = options.showRowNumber || false;

        // Get events:
        var onSelected = allBindings.get("select") || false;
        if (onSelected) {
            $(element).on("select", function(event, ui) {
                valueAccessor()(ui.value);
            });
        }

        var table = ko.utils.domData.get(element, "dataTable");
        table.draw(value, options);
    }
};

这是我的HTML部分：

<div data-bind="dataTable: $root.getData(), tableOptions: {width: '100%',height: '200px', 'allowHtml': true, 'cssClassNames': {'selectedTableRow': 'orange-background'} }"></div>

到目前为止，我得到了带有固定标题的表，该表工作正常。
现在，我想扩展到绑定处理程序以对“选择行”事件做出反应。
我在处理程序中使用// Get events部分尝试了此操作，但这不起作用。

在我的HTML中，添加select: $root.selectedRow(),
在函数selectedRow()中，放置了console.log("In selectedRow")。当我加载页面时，我看到每一行都调用selectedRow，但是当我单击一行时却不调用它。

该行的背景更改为橙色，因此Google添加了selectedTableRow类。

如何包装/绑定到选择事件？

最佳答案

最主要的问题是，如果我没记错的话，您尝试附加事件侦听器的方式。

您的$(element).on("select", onSelect)并不是您使用的库附加事件监听器的方式。在documentation中，您可以看到您实际上需要使用：google.visualization.events.addListener(table, 'select', selectHandler);

此外，最好在init方法中附加事件侦听器。每当您的数据更改时，都会调用update，因此它可能会添加多个事件侦听器。

这是您的代码的工作示例：

google.charts.load('current', {
  'packages': ['table']
});

google.charts.setOnLoadCallback(function() {

  ko.bindingHandlers.dataTable = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      var table = new google.visualization.Table(element);
      ko.utils.domData.set(element, "dataTable", table);

      // Get events:
      var onSelected = allBindings.get("select") || false;
      if (onSelected) {
        google.visualization.events.addListener(table, 'select', function() {
          // TODO: null/undefined/multiple selection checks
          var data = valueAccessor();
          var row = table.getSelection()[0].row;
          onSelected(data.getValue(row, 1)); // Sends salary of clicked row
        });
      }

    },

    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      var value = ko.unwrap(valueAccessor());

      // Get options:
      var options = allBindings.get("tableOptions") || {};
      // Default options:
      options.width = options.width || "200px";
      options.height = options.height || "200px";
      options.showRowNumber = options.showRowNumber || false;


      var table = ko.utils.domData.get(element, "dataTable");
      table.draw(value, options);
    }
  };

  ko.applyBindings({
    onSelect: function(value) {
      alert(value);
    },
    getData: function() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('number', 'Salary');
      data.addColumn('boolean', 'Full Time Employee');
      data.addRows([
        ['Mike', {
            v: 10000,
            f: '$10,000'
          },
          true
        ],
        ['Jim', {
            v: 8000,
            f: '$8,000'
          },
          false
        ],
        ['Alice', {
            v: 12500,
            f: '$12,500'
          },
          true
        ],
        ['Bob', {
            v: 7000,
            f: '$7,000'
          },
          true
        ]
      ]);
      return data;

    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div data-bind="dataTable: getData(), tableOptions: {width: '100%',height: '200px', 'allowHtml': true, 'cssClassNames': {'selectedTableRow': 'orange-background'} }, select: onSelect"></div>