JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <body>
    <div class="container">
      <div id="top-row" class="row">
        <div class="col-md-3">
          <h4>Schedule</h4>
        </div>
        <div class="col-md-9">
          <button id="add-button" type="button" class="btn btn-default" data-toggle="modal" data-target="#dialog">Add</button>
        </div>
      </div>
      <div id="middle-row" class="row">
        <div class="col-md-3">
          <div id="tasks" class="list-group">
            <div class="list-group-item active">
              <h4 class="list-group-item-heading">Tasks</h4>
            </div>
          </div>
         </div>
       </div>
    </div>
    <script id="task-template" type="text/template">
      <div class="row">
        <div class="col-md-2">
          <input id="toggle-completed" class="toggle" type="checkbox" <%= completed ? "checked": "" %>>
        </div>
        <div class="col-md-10">
          <h4 class="list-group-item-heading"><%= title %></h4>
          <p class="list-group-item-text"><%= deadline %></p>
        </div>
      </div>
    </script>
    <script id="dialog-template" type="text/template">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;<span class="sr-only">Close</span></button>
            <h4 class="modal-title">Add</h4>
          </div>
          <div class="modal-body">
            <form role="form" class="form-horizontal">
              <div class="form-group">
                <label...

JavaScript

(function ($) {

"use strict";

// Models

var Task = Backbone.Model.extend({
  urlRoot: "/tasks",
  defaults: {
    completed: false,
    title: 'New Task', 
    deadline: new Date, 
    description: '', 
    tagids: ''
  },

  toggle: function() {
  this.save({completed: !this.get("completed")});
  },

});


// Collections

var TaskList = Backbone.Collection.extend({
  model: Task,
  url: "/tasks"
});


// Views
    
    var Button = new (Backbone.View.extend({
        el: '#add-button',
        events: { 'click' : 'renderModal' },
        renderModal: function(){
            (new TaskDialog()).render()
        }
    }))()

var TaskView = Backbone.View.extend({
  tagName: "a",
  className: "list-group-item",
  attributes: {
    href: "#",
  },
  template: _.template($("#task-template").html()),
  events: {
    "click #toggle-completed": "toggleCompleted",
    "click .list-group-item-heading": "edit",
  },

  toggleCompleted: function() {
    this.model.toggle();
  },

  render: function() {
    this.$el.html(this.template(this.model.toJSON()));

    return this;
  },

  edit: function() {
    new TaskDialog({model: this.model}).show();
  },

  destroy: function() {
    this.model.destroy();
  },

});

var TaskDialog = Backbone.View.extend({
  className: "modal fade",
  attributes: {
    tabindex: "-1",
    role: "dialog",
  },

  initialize: function() {
      this.model = this.model || new Task
    this.template = _.template($('#dialog-template').html());
  },

  events: {
    "click .save": "save",
    "click .close": "close",
    "change input": "modify",
  },

  render: function() {
    this.$el.html(this.template(this.model.toJSON())).modal()

    return this
  },

  show: function() {
    $(document.body).append(this.render().el);
  },

  close: function() {
    this.remove();
  },

  save: function() {
    if(this.model.id == null) {
      tasks.create(this.model);
    }
    else {
      this.model.save();
    }
    this.remove();
  },

  edit:...