JSFiddle - React, Tailwind, and code Playground

by cleaver

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/template" id="assessmentTitleTemplate">

    <div id="titleDiv">
        <label for="title">Title:</label> &nbsp;&nbsp;<input type="text" />
    </div>

    <div id="choicesDiv" style="display: none;">
        <label for="choices">Choices:</label><input type="text" />
    </div>

    <div id="typeDiv" style="display: none;">
        <label for="types">Types:</label>
        <select name="type">
            <option>red</option>
            <option>blue</option>
            <option>green</option>
        </select>
    </div>

   <div id="directionControl">       
        <input type="button" value="Prev" class="prev" /> &nbsp;&nbsp;<input type="button" value="Next" class="next" />
    </div>
</script>

<div id="page">
  <div class="fuck">
  Fuck
  </div>
</div>

JavaScript

"use strict";

var titleView = Backbone.View.extend({
    tagName: 'div',
    className: 'title',
    template: _.template($('#assessmentTitleTemplate').html()),

    events: {
        'click .fuck': 'doFuck',
        'click .next': 'saveProceedNext',
        'click .prev': 'ProceedPrev'
    },

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

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

    saveProceedNext: function() {
        this.$('#titleDiv').hide();
        this.$('#choicesDiv').show();
    },

    ProceedPrev: function() {
      alert('p');
    }
});

var view = new titleView({
    el : $("#page"),
    model : new Backbone.Model()
});