changemewtf · May 5, 2014 22:16
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
    <head>
        <title></title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
        <script type="text/javascript">

            var postDefaults = {
                title: "Sicknasty Sweetawesome Blog Post",
                body: "Deal with how rad this blog post is."
            };

            // class Post < ActiveRecord::Base
            var Post = Backbone.Model.extend({
                defaults: postDefaults
            });

            var PostView = Backbone.View.extend({
                events: {
                    "click h1": "titleClick"
                },

                initialize: function() {
                    this.listenTo(this.model, "change", this.render);
                    this.listenTo(this.model, "change:title", function(){ alert("TITLE CHANGED!"); });
                },

                titleClick: function() {
                    console.log("wow, you clicked on the title.");
                },

                render: function() {
                    var header = $("<h1>").text(this.model.get("title"));
                    var body = $("<p>").text(this.model.get("body"));

                    this.$el.empty();
                    this.$el.append(header);
                    this.$el.append(body);
                }
            });

            var post = new Post;
            var postView = new PostView({ model: post });

            $(document).ready(function() {
                $("body").append(postView.el);
            });

        </script>
    </head>
    <body>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<title></title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
	<script type="text/javascript">

	var postDefaults = {
	title: "Sicknasty Sweetawesome Blog Post",
	body: "Deal with how rad this blog post is."
	};

	// class Post < ActiveRecord::Base
	var Post = Backbone.Model.extend({
	defaults: postDefaults
	});

	var PostView = Backbone.View.extend({
	events: {
	"click h1": "titleClick"
	},

	initialize: function() {
	this.listenTo(this.model, "change", this.render);
	this.listenTo(this.model, "change:title", function(){ alert("TITLE CHANGED!"); });
	},

	titleClick: function() {
	console.log("wow, you clicked on the title.");
	},

	render: function() {
	var header = $("<h1>").text(this.model.get("title"));
	var body = $("<p>").text(this.model.get("body"));

	this.$el.empty();
	this.$el.append(header);
	this.$el.append(body);
	}
	});

	var post = new Post;
	var postView = new PostView({ model: post });

	$(document).ready(function() {
	$("body").append(postView.el);
	});

	</script>
	</head>
	<body>
	</body>
	</html>