JSFiddle - React, Tailwind, and code Playground

by Stray

HTML

<script src="http://underscorejs.ru/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="http://vihtor.ru/table/backbone-relational.js"></script>
<!--

<table>
    <thead></thead> <--- TABLE STRUCTURE
    <tbody></tbody> <--- TABLE DATA
</table>

-->

JavaScript

/** OBJECT OF TABLE STRUCTURE **/
var Structure = [
    {name: 'id', title: 'ID'},
    {name: 'name', title: 'name'}
];

/** OBJECT OF TABLE DATA **/
var Data = [{
    id: 1,
    cells: [
        {column: 'id', value: 1},
        {column: 'name', value: 'some name'}
    ]
}];

/** COLUMNS (table structure) **/
var Column = Backbone.RelationalModel.extend({
    idAttribute: 'name',
    defaults: {
        name: null,
        title: null
    }
});
var Columns = Backbone.Collection.extend({model: Column});

/** ROWS (table data) **/
var Row = Backbone.RelationalModel.extend({
    defaults: {
        id: null
    }
});
var Rows = Backbone.Collection.extend({model: Row});

/** CELL (only relation) **/
Backbone.RelationalModel.extend({
    relations: [
        { // relation to row... (table data)
            type: Backbone.HasOne,
            key: 'row',
            relatedModel: Row,
            reverseRelation: { // ...and back (to cell)
                key: 'cells',
                type: Backbone.HasMany
            }
        },
        { // relation to column (table structure)
            type: Backbone.HasOne,
            key: 'column',
            relatedModel: Column
        }
    ],
    // cell data
    defaults: {
        column: null,
        value: null,
        disable: false
    }
});


/** DON'T WORKING VERSION **/

// get table structure
var columns = new Columns();
columns.url = '%STRUCTURE_URI%';
columns.fetch(); // <--- server answer: [{"name": "id", "title": "ID"},{"name": "name", "title": "name"}]

// get table data
var rows = new Rows();
rows.url = '%DATA_URI%';
rows.fetch(); // <--- server answer: [{"id": "1", "cells": [{"column": "id", "value": "1"},{"column": "name", "value": "some name"}]}]

// get cell of first row
var cell = rows.at(0).get('cells').at(0);

// get row id
var rowId = cell.get('row').get('id'); // <--- BAD: cell.get('row') == undefined
console.info('rowId', rowId);

// get column title
var columnTitle =...