JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/template" id="watchlist-edit-template">
<h4><%= watchlist ?  'Edit' : 'Create new' %> Watchlist</h4>
<h5><%= watchlist ? '':'Enter watchlist name:' %></h5>
<textarea id="watchlistName" cols="50" rows="1"><%= watchlist?    watchlist.name : '' %></textarea>
<hr>
<div id="hiddenWatchlistId" style="display:none;"><%= watchlist ? watchlist.id : 0 %></div>
<div class="list-group">
    <% watchlist.movies.each( function( list ){ %>
    <a href="#" class="list-group-item"><%= list.get("trackName") %></a>
    <% }); %>
</div>
</script>

JavaScript

var Watchlist = Backbone.Model.extend({
    urlRoot: 'http://myurl/watchlists',

    defaults: {
        id: undefined,
    },

    initialize: function() {
        this.set('movies', new MoviesCollection(this.get('movies')));
    },

    parse: function( apiResponse ){
        return apiResponse;
    }
});

var Watchlists = Backbone.Collection.extend({
    url: 'http://umovie.herokuapp.com/unsecure/watchlists',
    model: Watchlist,

    parse: function( apiResponse ){
        return apiResponse;
    }
});



var MovieModel = Backbone.Model.extend({
    urlRoot: "http://umovie.herokuapp.com/movies",
    idAttribute: '_id',
    defaults: {
        trackId: "",
        nameId: ""
    },
    initialize: function(data) {
        this.trackId = data.trackId;
    },
    parse: function(response){
        console.log("parsing moviemodel");
        this.trackId=response.trackId;
        return response;
    }
});

var MoviesCollection = Backbone.Collection.extend({
    model: MovieModel
});





var watchlists = new Watchlists();

watchlists.fetch({success: function(collection) {
    var tpl = _.template($('#watchlist-edit-template').html());
    collection.each(function(model) {
    	$('body').append(tpl({watchlist: model.attributes}));
    });
}});