JSFiddle - React, Tailwind, and code Playground

by Ruchi Samdariya

HTML

<div id="mydiv">Bla</div>
<script type="text/template" id="details">
    <ul><% _.each(persons, function(person) { %><li><%=person.name%></li>
        <%});%>
    </ul >
</script>

JavaScript

var Person = Backbone.Model.extend({}),
    Persons = Backbone.Collection.extend({
      //  url: '/echo/json/', // I changed the url to existing one, otherwise backbone fails
        model: Person
    }),
    View = Backbone.View.extend({
        el: '#mydiv',
        template: _.template($("#details").html()),
        initialize: function () {
            this.coll = new Persons()
            this.listenTo(this.coll, 'reset', this.render);
            
            // Change this to this.coll.fetch()
            this.coll.reset([{
                name: 'foo'
            }, {
                name: 'bar'
            }, {
                name: 'baz'
            }]);
        },
        render: function () {
            this.$el.html(this.template({ persons: this.coll.toJSON() }));
            return this;
        }
    });

var view = new View();