JSFiddle - React, Tailwind, and code Playground

by mistakster

HTML

<script src="http://backbonerelational.org/backbone-relational.js"></script>
<div id="results"></div>

JavaScript

// Scope for all model types and collections
var App = {};
// Make this score visible to Relational
Backbone.Relational.store.addModelScope(App);

// Base class for all items
var Item = App.Item = Backbone.RelationalModel.extend({
    // Class factory configuration
    subModelTypes: {
        "news": "ItemNews",
        "action": "ItemAction"
    },
    subModelTypeAttribute: "type"
});
// Other classes for items
App.ItemNews = Item.extend({});
App.ItemAction = Item.extend({});

// Item collection
var C = App.C = Backbone.Collection.extend({
    model: Item
});

// Outer holder
var M = Backbone.RelationalModel.extend({
    relations: [{
        type: Backbone.HasMany,
        key: "C",
        relatedModel: "Item",
        collectionType: "C"
    }]
});

var m = new M({
    data: "outer model",
    C: [
        {id: 1, name: "item 1", type: "news"},
        {id: 2, name: "item 2", type: "news"},
        {id: 3, name: "item 3", type: "action"}
    ]
});


var results = document.getElementById("results");

var line = document.createElement("p");
line.innerHTML = JSON.stringify(m.toJSON());
results.appendChild(line);

m.get("C").forEach(function(item) {
    var line = document.createElement("p");
    line.innerHTML = [
        "id: " + item.id,
        "is this news? " + (item instanceof App.ItemNews)
    ].join(", ");
    results.appendChild(line);
});