JSFiddle - React, Tailwind, and code Playground

by Saneesh K V

HTML

<div id="breadcrumbs"></div>

<form action="#" id="add_breadcrumb">
    <input type="text" name="name" placeholder="name">
    <input type="text" name="url" placeholder="url">
    <button type="submit">Add</button>
</form>

<!-- This template need to be loaded from a file : 'templates/tab-breadcrumb.html' -->
    <script type="txt/template" id="link_template"><a href="<%= url %>"><%= name %></a> &gt;</script>

        
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-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/2.0.2/backbone.marionette.min.js"></script>

CSS

#breadcrumbs {
    overflow: hidden;
}

#breadcrumbs .breadcrumb {
    float: left;
    padding: 5px;
}

JavaScript

$(function(){
App = new Backbone.Marionette.Application();

function getTemplate(url) {
    var data = "<h1> failed to load url : " + url + "</h1>";
    $.ajax({
        async: false,
        contentType: 'text/html',
        url: url,
        success: function(response) {
            data = response;
        }
    });
    return data;    
}
    
App.module("BreadcrumbModule", function(BreadcrumbModule){

    var BreadcrumbItemView = Marionette.ItemView.extend({
        //template  : '#link_template',
        
        // I want to use a file for template
        template: _.template( getTemplate('templates/tab-breadcrumb.html') ),
        className : 'breadcrumb'
    });
    
    var breadcrumbItemView = new BreadcrumbItemView();
    
    // The collection view, will render when initialized and when its collection changes
    var BreadcrumbListView = Marionette.CollectionView.extend({
        el         : '#breadcrumbs',
        childView  : BreadcrumbItemView,
        initialize : function(){
            this.listenTo(this.collection, 'change', this.render );
            this.render();
        }
    });
    
    // Create a new collection with 1 item to start with
    var breadcrumbCollection = new Backbone.Collection([{ name : 'foo', url : 'foo' }]);
    
    var breadcrumbView = new BreadcrumbListView({
        collection : breadcrumbCollection
    });
    
    
   // just wiring up the form to add a new item to the collection when submitted
    $('#add_breadcrumb').on('submit', function(e){
        e.preventDefault();
        breadcrumbCollection.add({
            name : $(this).find('[name=name]').val() || 'foo',
            url  : $(this).find('[name=url]').val() || 'bar'
        });
    });
    
});
});