Implemented auto-populating item edit view for collections. Rough at the moment...

public/dashboard/index.html

@@ -65,12 +65,17 @@
     <a class="close-reveal-modal">x</a>
     <h6><%= name %></h6>
     <p>Fill out the fields below to create/edit an object in the <%= name %> collection.</p>
-    <form class="item-edit-form">
+    <form class="item-edit-form nice">
       <% _.each(description, function (val, key, obj) { 
         var type = 'text'; %>
         <fieldset>
           <label for="item-val-<%= key %>"><%= key %></label>
-          <input id="item-val-<%= key %>" type="<%= type %>" <% if (val.required) print('required="true"'); %> />
+          <input 
+            id="item-val-<%= key %>" 
+            name="<%= key %>" 
+            type="<%= type %>" 
+            <% if (val.required) print('required="true"'); 
+            if (typeof values !== "undefined" && typeof values[key] !== "undefined") print('value='+values[key]); %> />
         </fieldset>
       <% }); %>
     </form>
@@ -434,8 +439,8 @@
     // dependencies
     $LAB
     .setOptions({
-      AlwaysPreserveOrder: true,
-      CacheBust: true
+      AlwaysPreserveOrder: true
+      // CacheBust: true
     })
     .script(l + 'underscore-min.js')
     .script(l + 'jquery-1.6.2.js')
@@ -450,6 +455,7 @@
     .script(m + 'plugin.js')
     .script(m + 'form.js')
     .script(m + 'schema-model.js')
+    .script(m + 'item-edit-model.js')
     .script(m + 'collection-model.js')
     // partials
     .script(p + 'plugin-view.js')

public/dashboard/js/model/collection-model.js

@@ -1,11 +1,14 @@
 window.CollectionModel = Backbone.Model.extend({
   url: function () {
-    return '/' + this.get("name");
+    console.log('/search/'+this.get('name')+'?find={}');
+    return '/search/' + this.get("name") + '?find={}';
   },
   getItemById: function (id) {
-    _items = this.model.get('results');
-    _item;
-    _.each(this.model.get('results'), function (item, index, list){
+    var _items = this.get('results');
+    console.log('_items');
+    console.log(_items);
+    var _item;
+    _.each(this.get('results'), function (item, index, list){
       if (item._id === id) {
         _item = item;
         return;
@@ -14,6 +17,6 @@ window.CollectionModel = Backbone.Model.extend({
     return _item || false;
   },
   parse: function (response) {
-    return {results: response};
+    return {results: response.results};
   }
 });

public/dashboard/js/model/item-edit-model.js

@@ -0,0 +1,12 @@
+window.ItemEditModel = Backbone.Model.extend({
+  url: function () {
+    return '/' + this.get('plugin');
+  },
+  onSync: function (response) {
+    console.log('onSync() in ItemEditModel');
+    console.log(response);
+  },
+  sync: function (method, model, options) {
+    d(this.url(), this.get('values'), this.onSync);
+  }
+});

public/dashboard/js/router.js

@@ -1,7 +1,7 @@
 var Router = Backbone.Router.extend({
   initialize: function() {
     // prevent caching
-    $.ajaxSetup({ cache: false });
+    // $.ajaxSetup({ cache: false });
     // allows to send restful calls over AJAX
     Backbone.emulateHTTP = true;
     window.app = new App();

public/dashboard/js/view/partial/collection-view.js

@@ -8,11 +8,15 @@ window.CollectionView = Backbone.View.extend({
   editItem: function (e) {
     console.log('editItem:'+$(e.currentTarget).attr("id"));
     //TODO: Implement auto-saving model.
-    
-    var _schemaModel = Backbone.model({
-      url: '/'+this.model.get('plugin'),
-      values: this.model.get('results')
-    })
+    var values = this.model.getItemById($(e.currentTarget).attr("id").replace('edit-item-',''));
+    console.log(values);
+    var _itemModel = new ItemEditModel({
+      description: this.model.get('description'), //schema definition
+      name: this.model.get('name'),
+      plugin: this.model.get('plugin'),
+      values: values
+    });
+    this._openItemEditModal(_itemModel);
   },
   deleteItem: function (e) {
     console.log('deleteItem');
@@ -27,9 +31,7 @@ window.CollectionView = Backbone.View.extend({
   },
   createItem: function () {
     //TODO: Dynamically create a form.
-    console.log(this.model);
-    console.log(this.model.get('results'));
-    var _newItemModel = new Backbone.Model({
+    var _newItemModel = new ItemEditModel({
       description: this.model.get('description'), //schema definition
       name: this.model.get('name'),
       plugin: this.model.get('plugin'),

public/dashboard/js/view/partial/item-edit-view.js

@@ -10,17 +10,16 @@ window.ItemEditView = Backbone.View.extend({
   _closeModal : function () {
     $('.close-reveal-modal').click();
   },
-  _createFormObject: function () {
-    var _newValues = {};
-    $("fieldset", this.el).each(function () {
-      //TODO: Account for required as well
-      //TODO: Get the names/values of all the fields and return.
+  _formObjectFromArray: function (formArray) {
+    var _formObject = {};
+    _.each(formArray, function (item, index, list) {
+      _formObject[item.name] = item.value;
     });
-    return _newValues;
+    return _formObject;
   },
   save: function (e) {
-    console.log('save');
-    this.model.save(this._createFormObject())
+    var _values = this._formObjectFromArray($('form', this.el).serializeArray());
+    this.model.save({values: _values});
   },
   render: function () {
     $(this.el).empty().append(this.template(this.model.toJSON())).reveal();