Level 5.2 collection methods and events.

src/routing.php

@@ -12,4 +12,4 @@ $app->delete('/todos/{id}', TodosController::class . '::delete');
 
 $app->get('/',              ServerController::class . '::index');
 $app->get('/server',        ServerController::class . '::server');
-// $app->match('{url}',        ServerController::class . '::catchAll');
+$app->match('{url}',        ServerController::class . '::catchAll');

web/client/src/todoList.js

@@ -3,9 +3,28 @@ const TodoList = Backbone.Collection.extend({
   url: '/server/todos',
 });
 
-$(function () {
-  // Make a global instance
-  todoList = new TodoList();
+/* List events:
+- reset: on fetch() and reset()
+- add: when adding a model to the collection
+- remove: when removing a model from the collection
+
+Using:
+- todoList.on('reset', () => {}). Can be disabled by passing { silent: true }
+- todoList.off('reset', <same_callback>) to remove it
+- todoList.on('add' (or 'remove'), (modelItem) => { ... })
+
+Model events are also usable on collections. Triggered on the collection when
+they are triggered on a model within the collection:
+- change : attribute change
+- change:<attr> : specific attribute change
+- destroy : model destroyed
+- sync : model successfully synced
+- error
+- all
+ */
+
+function todoListSingleExample(todoItem) {
+  const todoList = new TodoList();
 
   // Get number of items
   console.log('List length', todoList.length);
@@ -34,4 +53,31 @@ $(function () {
 //  console.log('List after reset', todoList.toJSON());
   todoList.fetch({ async: false });
   console.log('List after fetch', todoList.toJSON());
+
+  return todoList;
+}
+
+function todoListFromServer() {
+  const todoList = new TodoList();
+  todoList.fetch({ async: false });
+  // Collection forEach is /not/ Array.prototype.forEach.
+  todoList.forEach(item => { console.log(item.get('description')); });
+
+  // Not Array.prototype.map.
+  const r1 = todoList.map(item => item.get('description'));
+  console.log("r1", r1);
+
+  // Returns an Array, not another Collection.
+  const r2 = todoList.filter(item => item.get('status') === 'complete');
+  console.log("r2", r2, r2.constructor.name);
+
+  // And proxies to 46 Underscore methods.
+  // http://backbonejs.org/#Collection-Underscore-Methods
+
+  return todoList;
+}
+
+$(function () {
+  // todoListSingleExample(globalTodoItem);
+  globalList = todoListFromServer();
 });

web/client/src/todoModel.js

@@ -16,16 +16,14 @@ const TodoItem = Backbone.Model.extend({
   }
 );
 
-/**
- * @see Model.url
- */
-$(function () {
+function todoModelSingleExample() {
+
   const onChange = (change, x) => {
     console.log('On change', change.changed);
   };
 
-  // Create a model instance to load it by ID. Let it be global for console use.
-  todoItem = new TodoItem({ id: 1 });
+  // Create a model instance to load it by ID.
+  const todoItem = new TodoItem({ id: 1 });
 
   // Listeners
   todoItem.on('change', onChange);
@@ -58,5 +56,15 @@ $(function () {
 
   // Destroy on server.
   // todoItem.destroy();
+
+  return todoItem;
+}
+
+/**
+ * @see Model.url
+ */
+$(function () {
+  // Let it be global for console use.
+  globalTodoItem = todoModelSingleExample();
 });
 

web/client/src/todoView.js

@@ -58,7 +58,7 @@ const TodoView = Backbone.View.extend({
   },
 });
 
-$(function () {
+function todoViewSingleExample(todoItem) {
   // Create a view instance.
   const todoView = new TodoView({ model: todoItem });
 
@@ -68,4 +68,9 @@ $(function () {
 
   // Apply to the DOM.
   $('#app').html(todoView.el);
+}
+
+$(function () {
+  // Reuse the global item.
+  todoViewSingleExample(globalTodoItem);
 });

web/data/items.json

@@ -1,11 +1,11 @@
 {
     "2": {
-        "status": "unfinished",
+        "status": "incomplete",
         "description": "second",
         "id": 2
     },
     "3": {
-        "status": "unfinished",
+        "status": "incomplete",
         "description": "third",
         "id": 3
     },