JSFiddle - React, Tailwind, and code Playground

by Winter Soldier

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
<body>
  <div id='content'>
    Here is a sample div
    <div id="content-body">
      content to be changed
    </div>


  </div>
</body>

JavaScript

console.log("hello");
Test = Backbone.Model.extend({});
var testModel1 = new Test({
  'task': 'taskA',
  'due': 'dueByZ'
})
var testModel2 = new Test({
  'task': 'taskB',
  'due': 'dueByY'
})
console.log(testModel1.get('task'));
console.log(testModel2.get('task'));
ModelCollection = Backbone.Collection.extend({});
var models = new ModelCollection([testModel1, testModel2]);
console.log(models);

TodosView = Backbone.View.extend({
  el: "#content-body",
  initialize: function() {
    this.render();
  },
  render: function() {
    //$(this.el).html(_.template($('#todosTemplate').html()));
    var templ = "<div class='table-responsive'>    <table id='todo-table' class='table'>    <span class='caption'>Top Tasks&nbsp;&nbsp;<a id='<%= project %>' class='projectName'>(See 			All)</span></a>    <thead>    <tr>    <th>Task</th>    <th>Due</th>    </tr>    </thead>    <tbody></tbody>   </table> </div>";
    $(this.el).html(templ);
    _.each(this.collection.models, function(mdl){
    	var view = new TodoView({
      model: mdl
    });    
    $('tbody').append(view.el);
    });
    
  }
});

MainView = Backbone.View.extend({

  el: "#content",

  initialize: function() {
    this.render();
  },

  render: function() {
    new TodosView({
      collection: models
    });
  }
});

TodoView = Backbone.View.extend({
  tagName: "tr",
  className: "todo-rec",
  events: {
    "click .edit": "editFields"
  },
  initialize: function() {
    this.render();
    this.updateContent();
  },
  render: function() {
    var html = "     <td>        <label id='task' class='edit tasklabel'></label>        <input id='edited-task' class='new-edit taskinput' style='display:none;' value=''>        </td>        <td>        <span id='due' class='edit duelabel'></span>        <input id='edited-due' class='new-edit dueinput' style='display:none;' value=''>        </td>"
    this.$el.html(html);
    return this;
  },
  editFields: function() {
    console.log("todoView: editFields clicked");
  },
 ...