JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script id="tag-template" type="text/x-underscore-template">
    <% _(tags).each(function(t) { %>
        <%= t.name %><br>
    <% }); %>
</script>

<div id="main"></div>

JavaScript

var tagModel = Backbone.Model.extend({
    defaults: {
        name: '',
        image: '',
        pins: 0,
        repins: 0,
        impressions: 0
    },
    initialize: function() {
        console.log('tagfeed model is initialized');
        this.on("change", function() {
            console.log("An attribute has been changed");
        });
    }
});

var feedCollection = Backbone.Collection.extend({
    model: tagModel,
    initialize: function() {
        console.log('feedcollection is initialized');
    },
    fetch: function() {
        // Faked.
        this.add([
            { name: 'a', image: 'i', pins:  1, repins: 2, impressions:  3 },
            { name: 'b', image: 'j', pins: 11, repins: 6, impressions: 23 }
        ]);
    }
});

var test = new tagModel({
    name: 'test'
});

var newFeedCollection = new feedCollection();

newFeedCollection.fetch();

console.log(newFeedCollection.at(0));

var TestFeed = Backbone.View.extend({
    el: $('#main'),
    render: function(event) {
        console.log('here');
        var compiled_template = _.template($("#tag-template").html(), { tags: this.collection.toJSON() });
        this.$el.html(compiled_template);
        return this; //recommended as this enables calls to be chained.
    },
    initialize: function() {
        console.log('initialize view');
        this.collection.on('reset', this.render, this);
    }
});

//Tagfeed.testfeed.prototype.render();
var testfeed = new TestFeed({
    collection: newFeedCollection
});

testfeed.render();