elliot42/gist:5947837

## gistfile1.html
<html>
    <head>
        <script type="text/javascript" src="jquery-1.10.2.js"></script>
        <script type="text/javascript" src="underscore.js"></script>
        <script type="text/javascript" src="backbone.js"></script>
        <script type="text/javascript">
            $(function() {
                var units = ["hour", "day", "month"];
                var people = ["A", "B", "C", "D"];

                var Selector = Backbone.Model.extend({
                    initialize: function(units, people) {
                        this.set({units: units, people: people, person: people[0]});
                    }
                });

                var SelectorView = Backbone.View.extend({

                    tagName: 'form',
                    initialize: function() {
                        this.render();
                    },
                    events: {
                        'change': 'formChanged'
                    },
                    formChanged: function() {
                        this.model.set({ person: this.$('select').val() });
                        this.render();
                    },
                    render: function() {
                        var options = _.map(this.model.get('people'), function(person) {
                            return _.template("<option value=\"<%= person %>\"><%= person %></option>", { person: person });
                        });

                        var renderedOptions = options.join("");

                        var select = $('<select></select>').append(renderedOptions)
                            .val(this.model.get('person'));

                        this.$el.empty().append(select).append(this.model.get('person'));
                    },
                });

                s = new Selector(units, people);
                sv = new SelectorView({model: s});
                $('#goeshere').html(sv.el);
            });
        </script>
    </head>
    <body>
        <div id="goeshere"></div>
    </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="jquery-1.10.2.js"></script>
	<script type="text/javascript" src="underscore.js"></script>
	<script type="text/javascript" src="backbone.js"></script>
	<script type="text/javascript">
	$(function() {
	var units = ["hour", "day", "month"];
	var people = ["A", "B", "C", "D"];

	var Selector = Backbone.Model.extend({
	initialize: function(units, people) {
	this.set({units: units, people: people, person: people[0]});
	}
	});

	var SelectorView = Backbone.View.extend({

	tagName: 'form',
	initialize: function() {
	this.render();
	},
	events: {
	'change': 'formChanged'
	},
	formChanged: function() {
	this.model.set({ person: this.$('select').val() });
	this.render();
	},
	render: function() {
	var options = _.map(this.model.get('people'), function(person) {
	return _.template("<option value=\"<%= person %>\"><%= person %></option>", { person: person });
	});

	var renderedOptions = options.join("");

	var select = $('<select></select>').append(renderedOptions)
	.val(this.model.get('person'));

	this.$el.empty().append(select).append(this.model.get('person'));
	},
	});

	s = new Selector(units, people);
	sv = new SelectorView({model: s});
	$('#goeshere').html(sv.el);
	});
	</script>
	</head>
	<body>
	<div id="goeshere"></div>
	</body>
	</html>