JSFiddle - React, Tailwind, and code Playground

by evilcelery

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/src/backbone-forms.js"></script>
<div id="formHook"></div>

JavaScript

$(function() {
    var LoginUser = Backbone.Model.extend({
        schema: {
            username: {
                type: 'Text'
            },
            password: {
                type: 'Text'
            }
        },
        url: 'login_backbone_form'
    });

    var LoginView = Backbone.View.extend({
      events: {
          "click button#formButton": "saveForm"
      },
      
      initialize: function() {
        this.model = new LoginUser();
      },
      
      render: function() {
        var $button = $('<button type="button" name="login" id="formButton">Login</button>');
        
        this.form = new Backbone.Form({ model: this.model });
        
        this.$el.append(this.form.render().el);
        this.$el.append($button);
        
        return this;
      },
      
      saveForm: function() {
          this.form.commit();
          this.model.save();
          
          alert('hit saveForm');
          console.log(this.model.toJSON());
      }
    });

    window.loginView = new LoginView;
    $('#formHook').html(loginView.render().el);
});