JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<section class="person-list1"></section>
<section class="person-list2"></section>

CSS

@import url(http://fonts.googleapis.com/css?family=Capriola);
body {
    font-family: 'Capriola', sans-serif;
}
.person-list {
    padding: 5px;
}
.person {
    padding: 10px;
    border: 1px solid #bbb;
    margin-top: 5px;
}
.person:first-child {
    margin-top: 0;
}

JavaScript

console.log($(".person-list").length);

var Person = Backbone.Model.extend();
var PersonList = Backbone.Collection.extend({
    model: Person
});
var PersonView = Backbone.View.extend({
    tagElement: "div",
    className: "person",
    templatePerson: _.template("<p><%= firstName %><p><p><%= lastName %><p>"),
    templateEmpty: _.template("<p>None<p>"),
    render: function() {
        var html = this.model ? this.templatePerson(this.model.toJSON()) : this.templateEmpty();        
        this.$el.html(html);
        return this;        
    }
});
var PersonListView = Backbone.View.extend({
    templateEmpty: _.template("<p>None<p>"),
    testObj: [],
    initialize: function() {
        this.testInitObj= [];
    },
    render: function() {
        if(this.collection.length === 0) {
            var html = this.templateEmpty();
            this.$el.html(html);
        } else {
            this.personViews = [];
            this.collection.each(function(person) {
                var personView = new PersonView({ model: person });
                this.$el.append(personView.render().$el);
            }, this);
        }
        
        return this;
    },
    showTestData: function() {
        _.each(this.personViews, function(personView) {
            console.log(personView.testObj.prop1, personView.testObj.prop2);
        });
    }
});

var App = App || {};
_.extend(App, {
    getPersons: function() {
        return new PersonList([
            { firstName: "Mickey", lastName: "Mouse" },
            { firstName: "Minnie", lastName: "Mouse" },
            { firstName: "Frodo", lastName: "Baggins" },
            { firstName: "Twin", lastName: "Peaks" }
        ]);
    },
    init: function() {
        this.persons = this.getPersons();
        this.personListView1 = new PersonListView({ el: '.person-list1', collection: this.persons });
        this.personListView2 = new PersonListView({ el: '.person-list2', collection: this.persons });
        console.log("testObj...