JSFiddle - React, Tailwind, and code Playground

by Ruchi Samdariya

HTML

<header class="container-fluid">
  <div class="page-header">
    <h1>Backbone.js </h1>
    <p class="lead">Part 1 - Models, Model Instances, and Data Retrieval</p>
  </div>


<div class="container-fluid">
  <table class="table">
    <thead>
      <tr>
        <th>Manufacturer</th>
        <th>Model</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tr>
      <td id="board1-manufacturer"></td>
      <td id="board1-model"></td>
      <td id="board1-stock"></td>
    </tr>
    <tr>
      <td id="board2-manufacturer"></td>
      <td id="board2-model"></td>
      <td id="board2-stock"></td>
    </tr>
  </table>
</div>

CSS

body{
  background-color: #F3F3F3;
}

JavaScript

var Surfboard = Backbone.Model.extend({
  defaults: {
    manufacturer: '',
    model: '',
    stock: 0
  }
});

var board1 = new Surfboard({
  manufacturer: 'Channel Islands',
  model: 'Whip',
  stock: 12
});

$('#board1-manufacturer').html(board1.get('manufacturer'));
$('#board1-model').html(board1.get('model'));
$('#board1-stock').html(board1.get('stock'));

var board2 = new Surfboard({
  manufacturer: 'Lost',
  model: 'Sub Scorcher',
  stock: 9
});

$('#board2-manufacturer').html(board2.get('manufacturer'));
$('#board2-model').html(board2.get('model'));
$('#board2-stock').html(board2.get('stock'));