Level 3: Views.

.gitignore

@@ -9,4 +9,4 @@ node_modules/
 /var/logs/
 !/var/logs/.gitkeep
 /vendor/
-/web/lib/
+/web/client/lib/

.idea/runConfigurations/Install.xml → .idea/runConfigurations/npm_Install.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Install" type="js.build_tools.npm" factoryName="npm">
+  <configuration default="false" name="npm Install" type="js.build_tools.npm" factoryName="npm">
     <package-json value="$PROJECT_DIR$/web/client/package.json" />
     <command value="install" />
     <node-interpreter value="project" />

.idea/runConfigurations/Build_JS.xml → .idea/runConfigurations/npm_build.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Build JS" type="js.build_tools.npm" factoryName="npm">
+  <configuration default="false" name="npm build" type="js.build_tools.npm" factoryName="npm">
     <package-json value="$PROJECT_DIR$/web/client/package.json" />
     <command value="run" />
     <scripts>

web/client/lib/todos.js

@@ -1,31 +0,0 @@
-$(function () {
-  // Create a model class.
-  const TodoItem = Backbone.Model.extend({
-    // RESTful web service, RoR flavor.
-    urlRoot: '/server/todos'
-  });
-  // Create a model instance to load it by ID.
-  const todoItem = new TodoItem({ id: 1 });
-
-  // Access the server at /server/todos/1 (urlRoot + '/' + item.id).
-  const x = todoItem.fetch({ async: false });
-
-  // Manipulate attributes.
-  const description = todoItem.get('description');
-  todoItem.set('status', 'complete');
-
-  // Save on server.
-  todoItem.save();
-
-  // Create a view class.
-  const TodoView = Backbone.View.extend({
-    render: function () {
-      const html = '<h3>' + this.model.get('description') + '</h3>';
-      $(this.el).html(html);
-    }
-  });
-  // Create a view instance.
-  const todoView = new TodoView({ model: todoItem });
-  todoView.render();
-  $('#app').html(todoView.el);
-});

web/client/package.json

@@ -24,7 +24,7 @@
     "url": "http://code.osinet.fr/fgm/js__backbone__codeschool1.git"
   },
   "scripts": {
-    "build": "babel src -d lib",
+    "build": "babel src -d lib --source-maps",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "version": "1.0.0"

web/client/src/todos.js

@@ -1,12 +1,43 @@
+/**
+ * @see Model.url
+ */
 $(function () {
+  const onChange = (...args) => {
+    console.log('On change', args, TodoItem);
+  };
+
   // Create a model class.
   const TodoItem = Backbone.Model.extend({
+    defaults: {
+      description: "Empty todo",
+      status: "incomplete",
+    },
     // RESTful web service, RoR flavor.
     urlRoot: '/server/todos',
   });
+
   // Create a model instance to load it by ID.
   const todoItem = new TodoItem({ id: 1 });
 
+  // Listeners
+  todoItem.on('change', onChange);
+  // Skip listener during a change. Notice the value format.
+  todoItem.set({ 'description': 'some other description' }, {silent: true});
+  // Remove listener.
+  //todoItem.off('change', onChange);
+
+  /* Built-in events
+  change - when any attribute is modified
+  change:<attr> - when <attr> is modified
+  destroy - when the model is destroyed
+  sync - when the model successfully synced with the server
+  error - when model save or validation fails
+  all - on any event
+   */
+
+  // Check default attribute pre-fetch.
+  const defaultDescription = todoItem.get('description');
+
   // Access the server at /server/todos/1 (urlRoot + '/' + item.id).
   const x = todoItem.fetch({ async: false });
 
@@ -17,16 +48,47 @@ $(function () {
   // Save on server.
   todoItem.save();
 
+  // Destroy on server.
+  // todoItem.destroy();
+
   // Create a view class.
   const TodoView = Backbone.View.extend({
+    tagName: 'article',
+    id: 'todo-view',
+    className: 'todo',
+
+    // Underscore templating.
+    template: _.template('<h3><%= description %></h3>'),
+
+    events: {
+      // Generates this.$el.('h3", 'click', alertStatus).
+      'click h3': 'alertStatus',
+    },
+
+    alertStatus() {
+      alert('Hey, you clicked the H3');
+    },
+
     render: function () {
-      const html = '<h3>' + this.model.get('description') + '</h3>';
-      $(this.el).html(html);
+      const attributes = this.model.toJSON();
+      const html = this.template(attributes);
+      // Since this.el is a DOMElement, we can just wrap it with jQuery instead
+      // of using a jQuery selector like $('#todo-view') or $('.todo').
+      // This is better because it is id- and class- independent.
+      // $(this.el).html(html);
+      // Backbone even gives a shortcut: the $el property.
+      this.$el.html(html);
     },
   });
+
   // Create a view instance.
   const todoView = new TodoView({ model: todoItem });
+
+  // Build view.
   todoView.render();
+  // console.log(todoView.el);
+
+  // Apply to the DOM.
   $('#app').html(todoView.el);
 });
 

web/data/items.json

@@ -1,8 +1,8 @@
 {
     "1": {
-        "id": 1,
         "description": "Remember the milk",
-        "status": "complete"
+        "status": "complete",
+        "id": 1
     },
     "2": {
         "status": "unfinished",