loading js files using requirejs

public/javascripts/views/list.js

@@ -1,8 +1,18 @@
-var app = app || {};
+define(
+['jquery',
+'backbone',
+'collections/list',
+'views/task'
+],
 
-(function() {
+function(
+$,
+Backbone,
+List,
+TaskView
+) {
 
-  app.ListView = Backbone.View.extend({
+  var ListView = Backbone.View.extend({
 
     el: $("#main .children"),
 
@@ -11,7 +21,7 @@ var app = app || {};
     },
 
     initialize: function() {
-      app.Tasks = this.collection = new app.List();
+      Tasks = this.collection = new List();
       this.collection.fetch();
       this.listenTo(this.collection, 'add', this.renderTask);
     },
@@ -23,7 +33,7 @@ var app = app || {};
     },
 
     renderTask: function(task) {
-      var taskView = new app.TaskView({
+      var taskView = new TaskView({
         model: task
       });
       var a = taskView.render();
@@ -34,6 +44,8 @@ var app = app || {};
       console.log(a.$input.prop('selectionStart'));
     }
 
-  });
+ });
 
-}());
+return ListView;
+
+});

public/javascripts/views/page.js

@@ -0,0 +1,38 @@
+define(
+['jquery',
+'backbone',
+'views/list'
+],
+
+function(
+$,
+Backbone,
+ListView
+) {
+
+  var PageView = Backbone.View.extend({
+
+    el: $("#main"),
+
+    events: {
+      'keypress #newTask': 'createNewTask',
+      'blur #newTask': 'createNewTask'
+    },
+
+    initialize: function() {
+      this.listView = new ListView();
+      this.input = $('#newTask');
+    },
+
+    createNewTask: function(e) {
+      if (e.keyCode != 13) return;
+      if (!this.input.val().trim()) return;
+      this.listView.collection.add(new Task({content: this.input.val().trim() }));
+      this.input.val('');
+    }
+ 
+ });
+
+return PageView;
+
+});

public/javascripts/views/task.js

@@ -1,8 +1,18 @@
-var app = app || {};
+define(
+['jquery',
+'backbone',
+'socket',
+'util/constants'
+],
 
-(function() {
+function(
+$,
+Backbone,
+socket,
+constants
+) {
 
-  app.TaskView = Backbone.View.extend({
+  var TaskView = Backbone.View.extend({
 
     tagName: 'li',
     template: $('#taskTemplate').html(),
@@ -17,6 +27,7 @@ var app = app || {};
     initialize: function() {
       this.listenTo(this.model, 'change', this.render);
       this.listenTo(this.model, 'destroy', this.remove);
+      this.socket = io.connect();   
     },
 
     render: function() {
@@ -32,7 +43,7 @@ var app = app || {};
         }
       }
       this.$input = this.$('.edit:first');
-      socket.on('task', function(data){
+      this.socket.on('task', function(data){
         if (task.model.id == data.id) {
           if (task.$input.val != data.content)
             task.$input.val(data.content);
@@ -47,7 +58,7 @@ var app = app || {};
     },
 
     broadcast: function() {
-      socket.emit('task', { 
+      this.socket.emit('task', { 
         id: this.model.id, 
         parent_id: this.model.parent_id, 
         content: this.$input.val().trim() 
@@ -55,8 +66,8 @@ var app = app || {};
     },
 
     update: function(e) {
-      if ( e.which === ENTER_KEY ) {
-        app.Tasks.add({content:'', parent_id: this.model.get('parent_id')});
+      if ( e.which === constants.ENTER_KEY ) {
+        Tasks.add({content:'', parent_id: this.model.get('parent_id')});
         this.$input.blur();
         this.$el.prev('li').find('input').focus();
       }
@@ -73,6 +84,8 @@ var app = app || {};
       this.$el.removeClass('editing');
     }
 
-  });
+ });
 
-}());
+return TaskView;
+
+});