JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<div class="leftArea">
    <ul id="wineList"></ul>
</div>

<div id="mainArea">
</div>

<script type="text/template" id="wine-list-item">
    <% _.each(playlists, function (playlist) { %>
        <li><a href='#wines/<%= playlist.id %>'><%= playlist.id %></a></li>
    <% }); %>
</script>
        
<script src="http://coenraets.org/backbone-cellar/part1/js/jquery-1.7.1.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

CSS

.leftArea {
    width:60px;
    float:left;
    color:black;
    background:white;
    padding:20px;
}

#mainArea {
    width:300px;
    float:left;
    color:black;
    background:blue;
    padding:20px;
}

JavaScript

// Define the model
Playlist = Backbone.Model.extend();

// Define the collection
Playlists = Backbone.Collection.extend(
    {
        model: Playlist,
        // Url to request when fetch() is called
        url: 'http://gladtohelpyou.com/api/m/user/id/1/playlist/1',
        parse: function(response) {
            return response.results;
        },
        // Overwrite the sync method to pass over the Same Origin Policy
        sync: function(method, model, options) {
            var that = this;
                var params = _.extend({
                    type: 'GET',
                    dataType: 'json',
                    url: that.url,
                    processData: false
                }, options);

            return $.ajax(params);
        }
});

// Define the View
playlistView = Backbone.View.extend({
    el: $('#wineList'),
    events: {
    "click .playlistClick"       : "runPlaylist"
    },
    initialize: function() {
      _.bindAll(this, 'render');
      // create a collection
      this.collection = new Playlists;
       
      // Fetch the collection and call render() method
      var that = this;
      this.collection.fetch({
        success: function () {
            that.render();
        }
      });
    },
    // Use an extern template
    template: _.template($('#wine-list-item').html()),

    render: function() {
        //_.bindAll(this, 'runPlaylist');
        console.log(this.collection.toJSON());
        // Fill the html with the template and the collection
        $(this.el).html(this.template({ playlists: this.collection.toJSON() }));
    },
    runPlaylist: function(event) {
         var name = $(event.target).data('name');
         console.log(name);
    }
});

var app = new playlistView();