JsViews bind to rows and cols arrays

See also http://stackoverflow.com/q/31361458/1054484

by BorisMoore

HTML

<script src="http://www.jsviews.com/download/jsviews.js"></script>
<link rel="stylesheet" href="http://www.jsviews.com/download/sample-tag-controls/jsonview/jsonview.css">
  <div class="left">
    <div id="result"></div>
  </div>

    <script id="personTmpl" type="text/x-jsrender">
    <div>
      <button data-link="{on ~insertRow}">Insert Row</button>
    </div>
    <table>
      <tbody>
        {^{for grid.rows ~grid=grid}}
        <tr>
          <td>
            <button data-link="{on ~removeRow}">Remove row</button><br/>
            <button data-link="{on ~insertCol context=~root}">Insert col</button>
          </td>
            {^{for ~grid.cols ^~rowIndex=#index ~row=#data}}
            {{!--Use ^~ syntax to data-link to contextual template params, for live updates--}}
          <td>
              Row {^{:~rowIndex}} {^{:~row.rowProp}}<br/>
              Col: {^{:#index}} {^{:colProp}}<br/>
            <input data-link="~row.rowProp" />
            <input data-link="colProp" />
            <span class="remove" data-link="{on ~removeCol}"></span>
          </td>
          {{/for}}
        </tr>
        {{/for}}
      </tbody>
    </table>
  </script>

CSS

.remove:after {
	color: #be614c;
	font-weight: bold;
	padding: 0 6px 2px;
	content: 'x';
	cursor: pointer;
    font-family: Arial;
    font-size: 14pt;
}

.remove:hover:after {
	color: red;
	background-color: #dbffe0;
}

td {
    border: solid grey 1px;
    padding: 5px;
}

JavaScript

var appData = { grid: {
  rows: [{ rowProp: "row1" }, { rowProp: "row2" }],
  cols: [{ colProp: "col1" }, { colProp: "col2" }]
}};

var methods = {
  insertRow: function(ev, eventArgs) {
    var view = eventArgs.view;
    $.observable(this.grid.rows).insert({ rowProp: "newRowProp" });
  },
  insertCol: function(ev, eventArgs) {
    var view = eventArgs.view;
    $.observable(this.grid.cols).insert({ colProp: "newColProp" });
  },
  removeRow: function(ev, eventArgs) {
    var view = eventArgs.view;
    $.observable(view.get("array").data).remove(
      view.index
    )
  },
  removeCol: function(ev, eventArgs) {
    var view = eventArgs.view;
    $.observable(view.get("array").data).remove(
      view.index
    )
  }
}

var tmpl = $.templates("#personTmpl");

tmpl.link("#result", appData, methods);