#20 Re-organising files

makesites · Oct 9, 2012 · e5ec0f7 · e5ec0f7
1 parent c5ed6b8
commit e5ec0f7
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 0 deletions.
diff --git a/example/index.html → examples/auth/public/index.html b/example/index.html → examples/auth/public/index.html
diff --git a/example/server-auth.js → examples/auth/server.js b/example/server-auth.js → examples/auth/server.js
diff --git a/examples/basic/public/index.html b/examples/basic/public/index.html
@@ -0,0 +1,120 @@
+<html>
+<head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+    <script src="/client.js"></script>
+
+    <script>
+        var Message = Backbone.Model.extend({
+
+            initialize: function() {
+                this.bind('error', function(model, err) {
+                    alert(err.message);
+                });
+            }
+
+        });
+
+        var Messages = Backbone.Collection.extend({
+
+            // Specify the backend with which to sync
+            backend: 'messages',
+
+            model: Message,
+
+            initialize: function() {
+                // Setup default backend bindings
+                // (see lib/browser.js for details).
+                this.bindBackend();
+            }
+
+        });
+
+        var MessageView = Backbone.View.extend({
+
+            tagName: 'li',
+
+            events: {
+                'click .delete': 'delete'
+            },
+
+            initialize: function() {
+                _.bindAll(this, 'render', 'delete');
+
+                this.template = _.template($('#message-template').html());
+            },
+
+            render: function() {
+                $(this.el).html(this.template(this.model.toJSON()));
+                return this;
+            },
+
+            delete: function(e) {
+                e.preventDefault();
+                this.model.destroy();
+            }
+
+        });
+
+        var MessagesView = Backbone.View.extend({
+
+            events: {
+                'click .send': 'send',
+                'keypress .message': 'keypress'
+            },
+
+            initialize: function(options) {
+                _.bindAll(this, 'render', 'send', 'keypress');
+
+                this.collection.bind('add', this.render);
+                this.collection.bind('change', this.render);
+                this.collection.bind('remove', this.render);
+                this.collection.bind('reset', this.render);
+                this.collection.fetch();
+
+                this.template = _.template($('#messages-template').html());
+            },
+
+            render: function() {
+                $(this.el).html(this.template());
+
+                this.collection.each(function(message) {
+                    var view = new MessageView({ model: message });
+                    this.$('ul').append(view.render().el);
+                });
+
+                return this;
+            },
+
+            send: function() {
+                this.collection.create({ text: this.$('.message').val() });
+                this.$('.message').val('');
+            },
+
+            keypress: function(e) {
+                if (e.which === 13) this.send();
+            }
+
+        });
+
+        $(function() {
+            window.messages = new Messages();
+            new MessagesView({ el: $('#messages'), collection: messages }).render();
+        });
+    </script>
+
+    <script id="message-template" type="text/template">
+        <%= text %>
+        <a class="delete" href="#">[x]</a>
+    </script>
+
+    <script id="messages-template" type="text/template">
+        <input class="message" type="text">
+        <input class="send" type="submit" value="Send">
+        <ul></ul>
+    </script>
+</head>
+<body>
+    <h1>Messages</h1>
+    <div id="messages"></div>
+</body>
+</html>
diff --git a/example/server-basic.js → examples/basic/server.js b/example/server-basic.js → examples/basic/server.js
diff --git a/example/server.js → examples/server.js b/example/server.js → examples/server.js