MarionetteJS (Backbone.Marionette) Playground

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

by Cardiff

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.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.marionette/1.8.8/backbone.marionette.js"></script>
<header>
    
<h1>View editmode demo</h1>

</header>
</br>
<script type="text/html" id="editmode-tmpl">
    <textarea class="form-control" rows="1"><%= content %></textarea>
</script>

<script type="text/html" id="viewmode-tmpl">
    <p class="showtext"><%= content %></p>
</script>

<script type="text/template" id="editable-tmpl">
<div class="panel panel-success"> 
        <div class="panel-heading"> 
            <h4 class="panel-title" > Editable text </h4>           
        </div>
        <div class="panel-body">
        </div>
    </div >
</script>    
    
<div id="container"></div>
<div id="container1"></div>

CSS

.showtext {
    cursor: pointer;    
}

JavaScript

var textModel = Backbone.Model.extend({
    defaults: {
        content: "Default text, click here to edit!"   
    }
});
var textModelInstance = new textModel();

// Itemview: editmode
var editModeView = Marionette.ItemView.extend({
    model: textModelInstance,    
    template: "#editmode-tmpl",
    ui: {
        textarea: 'textarea'
    },
    events: {
        'blur @ui.textarea': 'saveText'
    },
    saveText: function () {
        // Save the value
        this.model.set('content', this.ui.textarea.val());
        
        // Trigger
        Marionette.getOption(this, "parentView").trigger('text:save');  
    },
    onDomRefresh: function() {
        // Make sure the element has focus
        this.ui.textarea.focus();
    }
});

// Itemview: showmode
var showModeView = Marionette.ItemView.extend({
    model: textModelInstance,  
    template: "#viewmode-tmpl",
    ui: {
        textarea: '.showtext'
    },
    events: {
        'click @ui.textarea': 'textClicked'  
    },
    modelEvents: {
        'change': 'updateValue'
    },
    textClicked: function() {
        Marionette.getOption(this, "parentView").trigger('text:edit');    
    },
    updateValue: function() {
        this.ui.textarea.html(this.model.get('content'));    
    }
});

var editableComponent = Marionette.Layout.extend({
    template: "#editable-tmpl",
    initialize: function() {
        // Make the view listen to events triggered on itself
        Marionette.bindEntityEvents(this, this, this.events);     
    },
    regions: {
        textregion: '.panel-body'    
    },
    onRender: function() {
        this.loadShowMode();        
    },
    events: {
        'text:edit': 'loadEditMode',
        'text:save': 'loadShowMode' 
    },
    loadEditMode: function() {
        this.textregion.show(new editModeView({
            parentView: this
        }));        
    },
    loadShowMode: function() {  
        this.textregion.show(new showModeView({
            parentView: this
       ...