<commit_before><!DOCTYPE html>
<html>
<head>
  <title>KO Grid</title>

  <script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
</head>
<body>
  <div id="grid-container" data-bind="grid: $data"></div>

  <script type="application/javascript">

  /**

  [x] Render in basic forEach loop.
  [x] Render columns if specified.
  [x] Add header.
  [ ] Add sort handlers.
  [ ] Support single-row selection.
  [ ] Support multi-row selection.
  [ ] Use object properties as default column array.
  [ ] Extract templates to template factory (or layout).

  */

  function init(ele, value, bindings, model, context) {
    ko.renderTemplate('grid-template', value, {
      templateEngine: new ko.nativeTemplateEngine()
    }, ele);

    return { controlsDescendantBindings: true };
  }

  ko.bindingHandlers.grid = { init: init };

  kg = {};
  kg.grid = function (observable, columns) {
    var columnArray;

    columnArray = [];
    columns = columns || {};
    Object.keys(columns).forEach(function (key) {
      columnArray.push({ name: key, template: columns[key] });
    });

    return { data: observable, columns: columnArray };
  };

  document.addEventListener("DOMContentLoaded", function () {
    var i, data, grid, element;

    i = 1;
    data = ko.observableArray();
    grid = kg.grid(data, { 'name': 'text', 'count': 'link' });
    element = document.getElementById('grid-container');

    ko.applyBindings(grid, element);

    setInterval(function () {
      data.push({ name: i, count: i });
      i += 1;
    }, 1000);
  });

  </script>

  <script id="grid-template" type="text/html">

  <div class="grid">
    <div class="grid-row grid-row-header" data-bind="foreach: { data: columns, as: 'column' }">
      <span class="grid-cell grid-cell-header" data-bind="text: column.name"></span>
    </div>
<commit_msg>Add example of automatic updating with observable.<commit_after><!DOCTYPE html>
<html>
<head>
  <title>KO Grid</title>

  <script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
</head>
<body>
  <div id="grid-container" data-bind="grid: $data"></div>

  <script type="application/javascript">

  /**

  [x] Render in basic forEach loop.
  [x] Render columns if specified.
  [x] Add header.
  [ ] Add sort handlers.
  [ ] Support single-row selection.
  [ ] Support multi-row selection.
  [ ] Use object properties as default column array.
  [ ] Extract templates to template factory (or layout).

  */

  function init(ele, value, bindings, model, context) {
    ko.renderTemplate('grid-template', value, {
      templateEngine: new ko.nativeTemplateEngine()
    }, ele);

    return { controlsDescendantBindings: true };
  }

  ko.bindingHandlers.grid = { init: init };

  kg = {};
  kg.grid = function (observable, columns) {
    var columnArray;

    columnArray = [];
    columns = columns || {};
    Object.keys(columns).forEach(function (key) {
      columnArray.push({ name: key, template: columns[key] });
    });

    return { data: observable, columns: columnArray };
  };

  document.addEventListener("DOMContentLoaded", function () {
    var i, data, grid, element;

    i = 1;
    data = ko.observableArray();
    grid = kg.grid(data, { 'name': 'text', 'count': 'link' });
    element = document.getElementById('grid-container');

    ko.applyBindings(grid, element);

    setInterval(function () {
      data.push({ name: ko.observable(i), count: ko.observable(i) });
      i += 1;
    }, 1000);

    setInterval(function () {
      var raw, index, element;

      raw = data();
      index = Math.floor(Math.random() * (raw.length));
      element = raw[index];
      element.name('Edited!');
    }, 5000);
  });

  </script>

  <script id="grid-template" type="text/html">

  <div class="grid">
    <div class="grid-row grid-row-header" data-bind="foreach: { data: columns, as: 'column' }">
      <span class="grid-cell grid-cell-header" data-bind="text: column.name"></span>
    </div>

{'fraction_non_alphanumeric': 0.16780217007317688, 'fraction_numerical': 0.0055513499873832955, 'mean_word_length': 3.2669537136706137, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '41373', 'n_tokens_mistral': 1303, 'n_tokens_neox': 1233, 'n_words': 306}