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 type="text/template" id="rate_select_template">
    <select id="rate-selector">
        <% _(rates).each(function(rate) { %>
            <option value="<%= rate.duration %>"><%= rate.duration %></option>
        <% }); %>
    </select>
</script>

<div id="rate-editor-container"></div>

JavaScript

Rate = Backbone.Model.extend({
    duration: null
});

Rates = Backbone.Collection.extend({
    initialize: function(model, options) {}
});

AppView = Backbone.View.extend({
    el: $('#rate-editor-container'),
    initialize: function() {
        this.rates = new Rates(null, {
            view: this
        });

        this.rates.add(new Rate({
            duration: "Not Set"
        }));
        this.rates.add(new Rate({
            duration: "Weekly"
        }));
        this.rates.add(new Rate({
            duration: "Monthly"
        }));

        this.render();
    },
    render: function() {
        var rate_select_template = _.template($("#rate_select_template").html(), {
            rates: this.rates.toJSON(),
            labelValue: 'Something'
        });
        $('#rate-editor-container').html(rate_select_template);
    },
});

var appview = new AppView();