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-9">
          <button id="add-button" type="button" class="btn btn-default" data-toggle="modal" data-target="#dialog">Add</button>
        </div>
      </div>

    </div>
    <script id="all-image-template" type="text/template">
        <div class="modal">
            <div class="modal-header"><h3><%= title %></h3></div>
            <div class="modal-body"><%= body %></div>
            <div class="modal-footer"><a class="btn close">Close</a></div>
        </div>
    </script>

JavaScript

(function ($) {

"use strict";


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


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

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

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

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

    return this
  },

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

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