JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<form action="" id="form_discussion" method="post">

<label for="discussion_title">Discussion Title</label>
<input type="text" id="discussion_title" name="discussion_title" />

<input class="btnCreateDiscussion" type="button" value="Create Discussion">
  <script type="text/template" id="discussion-template">
    <h1><%= title %></h1>
  </script>

JavaScript

var Discussion = Backbone.Model.extend({
    defaults: {
        id: null,
        title: 'New discussion'
    },
    urlRoot: '/api/discussion'
});

var DiscussionCollection = Backbone.Collection.extend({
    model: Discussion,
    url: '/api/discussion'
});

var DiscussionView = Backbone.View.extend({   
   events: {
        'click .btnCreateDiscussion': 'create',
        'keypress #discussion_title': 'create'
   },

   initialize: function(){
        //this.$el = $("#form_discussion");
        this.template = _.template( $('#discussion-template').html() );
   },

   render: function(){
        console.log("rendering");
        return this;    
   },

   create: function(){
        alert('creating a new discussion')
   }
});

var discussionView = new DiscussionView({ el: $("#form_discussion"), model: Discussion });