MarionetteJS (Backbone.Marionette) Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.8/backbone.marionette.js"></script>
<header>
    
<h1>Marionette survey form demo</h1>

</header>
</br>
<script type="text/html" id="survey">
    <div class="panel panel-primary"> 
        <div class="panel-heading"> 
            <h3 class="panel-title" > A cool survey regarding your life </h3>           
        </div>
        <div class="panel-body">
            <div class="questions"></div>
            <div class="submitbutton">
                <button type="button" class="btn btn-primary">Submit survey!</button>
            </div>
        </div>
    </div >
</script>

<script type="text/template" id="view-multiplechoice">
    <div class="panel panel-success"> 
        <div class="panel-heading"> 
            <h4 class="panel-title" > <%= question %> </h4>           
        </div>
        <div class="panel-body">
            <div class="warningmsg"><%= validationmsg %></div>
            <% _.each( options, function( option, index ){ %> 
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="<%= index %>" value="<%= option %>"> <%= option %>
                  </label>
                </div>
            <% }); %>
        </div>
    </div>
</script>

<script type="text/template" id="view-openquestion">
<div class="panel panel-success"> 
        <div class="panel-heading"> 
            <h4 class="panel-title" > <%= question %> </h4>           
        </div>
        <div class="panel-body">
            <div class="warningmsg"><%= validationmsg %></div>
            <textarea class="form-control"...

CSS

li {
    height: 40px;
}
li > button {
    float: right;
}
body {
    width: 90%;
    margin: 0 auto;
}
    
.warningmsg {
    color: #F00;   
}

.panel-warningborder {
    border-color: #F00;
}

.warningmsg {
    display: none;   
}
}

JavaScript

// Define data
var surveyData = [{
    id: 1,
    type: 'multiplechoice',
    question: 'What color do you like?',
    options: ["Red", "Green", "Insanely blue", "Yellow?"],
    result: null,
    validationmsg: "Please choose a color."
}];

// Setup models
var questionModel = Backbone.Model.extend({
    defaults: {
        type: null,
        question: "",
        options: null,
        result: null,
        validationmsg: "Please fill in this question."
    },
    validate: function () {
        // Check if a result has been set, if not, invalidate
        if (!this.get('result')) {
            return false;
        }
        return true;
    }
});

// Setup collection
var surveyCollection = Backbone.Collection.extend({
    model: questionModel
});
var surveyCollectionInstance = new surveyCollection(surveyData);

// Define the ItemViews
/// Base itemView
var baseSurveyItemView = Marionette.ItemView.extend({
    ui: {
        warningmsg: '.warningmsg',
        panel: '.panel'
    },
    events: {
        'change': 'storeResult'
    },
    modelEvents: {
        'showInvalidMessage': 'showInvalidMessage',
        'hideInvalidMessage': 'hideInvalidMessage'
    },
    showInvalidMessage: function() {
        // Show message
        this.ui.warningmsg.show();
        
        // Add warning class
        this.ui.panel.addClass('panel-warningborder');
    },
    hideInvalidMessage: function() {
        // Hide message
        this.ui.warningmsg.hide();
        
        // Remove warning class
        this.ui.panel.removeClass('panel-warningborder');   
    }
});

/// Specific views
var multipleChoiceItemView = baseSurveyItemView.extend({
    template: "#view-multiplechoice",
    storeResult: function() {
        var value = this.$el.find("input[type='radio']:checked").val();
        this.model.set('result', value);
    }
});

var openQuestionItemView = baseSurveyItemView.extend({
    template: "#view-openquestion",
    storeResult: function() {
        var value =...