Inputs.Collection = Backbone.Collection.extend({
   model: Inputs.Model,
   url: "/apis/v2/inputs",
   sortAttribute: "name", // supported attributes are model's element names + any custom strategies below
   comparator: function(model) 
   {
     return Utils.genericComparator.call(this, model);
   },
   strategies: {},
   changeSort: function (sortAttribute) 
   {
     if (this.strategies[sortAttribute]) {
       this.comparator = this.strategies[sortAttribute];
       return;
     }
     this.comparator = Inputs.Collection.prototype.comparator;
     this.sortAttribute = sortAttribute;
   },
   parse: function (resp)
   {
     var data = ( resp && resp.input_list ) ? resp.input_list : [];
     return data;
   }
 });

Initialization of Sort Method in View

 initialize: function () // View Initialize
 {
   var self = this;
   this.collection = new Inputs.Collection();
   var currentMethod = app.storageModel.load("inputs:sort");
   if (currentMethod) {
     this.collection.changeSort(currentMethod);
   } else {
     app.storageModel.save("inputs:sort", this.collection.sortAttribute);
   }
   ...
 },
 afterRender: function() 
 {
   // Indicate to user what we are sorting
   var currentMethod = this.collection.sortAttribute;
   if (currentMethod && currentMethod.match(/_r$/)) {
     // reserve sorting
     this.$(".jsSort[data-sort=\""+currentMethod.replace(/_r$/,"")+"\"]").addClass("down");
   } else {
     this.$(".jsSort[data-sort=\""+currentMethod+"\"]").addClass("up");
   }
 },

Dynamic Code to Change Sort Method

 events: {
   "click .jsSort": "sortTable"
 },
 sortTable: function(e) 
 {
   var sortBy = $(e.currentTarget).data("sort");
   var currentMethod = app.storageModel.load("inputs:sort");
   if (sortBy === currentMethod) {
     sortBy += "_r"; // reserve sorting
   }
   this.collection.changeSort(sortBy);
   this.collection.sort();
   app.storageModel.save("inputs:sort", sortBy);
   this.render();
 },

Html Code

<div class="span4 sort jsSort unselectable" data-sort="name">Name</div>
<div class="span5 sort jsSort unselectable" data-sort="url">Connection</div>
<div class="span2 sort jsSort unselectable" data-sort="state">Status</div

Generic Sort Code

 // Comparator Function for Collection sort
 //
 // Usage: 
 // My.Collection = Backbone.Collection.extend({
 // sortAttribute: "name", // supported attributes are model's element names + any custom strategies below
 // comparator: function(model) { return Utils.genericComparator.call(this, model); },
 // strategies: { <your own custom strategy not covered by genericComparator> },
 // changeSort: function (sortAttribute) {
 // if (this.strategies[sortAttribute]) {
 // this.comparator = this.strategies[sortAttribute];
 // return;
 // }
 // this.comparator = My.Collection.prototype.comparator;
 // this.sortAttribute = sortAttribute;
 // },
 // ...
 // });
 Utils.genericComparator = function (model) 
 {
   var last = this.sortAttribute.slice(-2); // last 3 chars
   var reversed = false;
   var attribute = this.sortAttribute;
   if (last === "_r") {
     attribute = this.sortAttribute.substr(0, this.sortAttribute.length-2);
     reversed = true;
   }
 
   var value = model.get(attribute);
   var matches;
   if (matches = attribute.match(/\((.*)\)$/)) // ends with () ?
   { 
     // function call
     var fname = attribute.substring(0, attribute.length - matches[0].length);
     if (fname.indexOf(".") > 0) 
     { 
       var flist = fname.split(".");
       var args = matches[1].replace(/'/g, "");
       if (flist.length == 2) 
       {
         value = model[flist[0]][flist[1]](args);
       }
     } else {
       value = model[fname](matches[1]);
     }
   } 
   var retval = Utils.genericComparatorFromValue(value, reversed);
   return retval;
 };
 
 // Takes a value as input format it for consistant compare and optionally reverse it
 // Returns value prepped for compare
 Utils.genericComparatorFromValue = function (value, reversed) { 
   if (_.isUndefined(value)) {
     return value;
   }
 
   if (typeof value.toLowerCase === "function") {
     // string type 
     var string = value.toLowerCase();
     if (reversed) {
       string = string.split(""); // string to array
       string = _.map(string, function(letter) { return String.fromCharCode(-(letter.charCodeAt(0))); });
       return string;
     }
     return string;
   } else if (value === true || value === false) {
     // boolean type
     return reversed ? !value : value;
   } else if (value === null) {
     return value;
   } else {
     // integer, float
     return reversed ? -value : value;
   }
 };

The post Backbone Collection Flexible Value Sorting Solution appeared first on Techy Things.

We have fields that needs to be validated. We already highlight the erroneous field(s) and display a specific message below each erroneous field. Now we want to display a popup notification on the top of page.

Solution #1 - Invite to look below for actual error(s)

var isValid = this.model.save(settings, {
   wait: true,
   success: function(model) {
      callback(model);
      var url = "/streams/" + model.get('id');
      app.router.navigate(url, {trigger: false});
      self.render();
   },
   error: function()
   {
      notifier.error_x("Please correct the field(s) marked in red below.");
      self.updateApplyButton();
   }
});
      
if (isValid === false)
{	
   // validation error
   self.updateApplyButton();
}

Solution #2 - Display the actual error(s)

var isValid = this.model.save(settings, {
   wait: true,
   success: function(model) {
      callback(model);
      var url = "/streams/" + model.get('id');
      app.router.navigate(url, {trigger: false});
      self.render();
   },
   error: function()
   {
      self.updateApplyButton();
   }
});
      
if (isValid === false)
{	
   // validation error
   for (var key in this.model.validationError)
   {  if (this.model.validationError.hasOwnProperty(key))
      {  notifier.error_x(this.model.validationError[key]);
      }
   }

   self.updateApplyButton();
}

Discussion

The solution #1 is preferred because it directly tells the user to look below and secondly since it auto-fades after some time, it better not contain too complex instructions.

Also notice the isValid variable. It is actually a returned promise. But it happens to be null when there is validation error(s) so it can be evaluated as a boolean although it is not a solid as it could be.

The post Backbone bootstrap model validations appeared first on Techy Things.

The post Backbone after all render appeared first on Techy Things.

The solution is

 var views = {...};
 app.mainView.setViews(views);
 views["#content-view"].render().once("afterRender", function() {
   // console.log("rendered");
   $(window).trigger('scroll.rpinnable');
 }, this);

The post Callback after all child views have rendered appeared first on Techy Things.

We are using model.save(settings, {wait:true}) and the Model is configured with idAttribute: "name" :

Backbone 1.1.2 wrongfully sends the request to PUT /api/presets/undefined.
Before it was going to POST /api/presets/.

Our device's presets map to filenames in a directory and they don't have ID the web interfaces uses the name as ID for this model.

In Backbone 1.0.0, the same code was causing isNew() to return true:

This is our save() call. I inspected that the model does not have name in it's attributes and is passed a new one via settings:

This could be the commit that broke this :

https://github.com/jashkenas/backbone/commit/11cc0e863f9951b4242144d65b581348bd9ee092

I tried to patch this commit but it does not resolves it:

https://github.com/jashkenas/backbone/commit/9f81d980f0599e8691af80034944d4abafb3f44b

So I continue investigating why isNew() walks on an object that has "name" set in the model and it is because of this line and that wait is true :

The post Backbone create sends PUT /api/presets/undefined instead of POST /api/presets appeared first on Techy Things.

#1 - Did everything load in the network debugger window ?

Missing one or several template views could cause the whole UI not to render

#2 - Any Javascript errors in Console ?

Yes: Is it "context is undefined"? This means it could not found its anchor point on the DOM.

One reason could be mismatch of ID in the HTML and Javascript

Watch out what is your root element ID you are attaching too with code like this:

      // Create a new Layout with options.
      var layout = new Backbone.Layout(_.extend({
        el: "#backbone-container"
      }, options));

The post Backbone LayoutManager view not rendering appeared first on Techy Things.

var deferred = $.Deferred();
 recording.save(
 {
 success : function () { 
 deferred.done();
 }, 
 error : function () { 
 deferred.done();
 }
 });

The problem is that the first parameter to save is an object of new member's values and not the options. So you need to add either null or {}.

var deferred = $.Deferred();
 recording.save({}, 
 {
 success : function () { 
 deferred.done();
 }, 
 error : function () { 
 deferred.done();
 }
 });

The post Backbone model.save does not trigger error or success callback appeared first on Techy Things.

The solution is to add data: $.param({ mySuperVariableName: 1}) in the fetch options.

Folders.data.fetch(
{
 data: $.param({ showContent: 1}),
 success:function(model, response, options)
 {
    //model.deferred.resolve();
 },
 error:function(model, response, options)
 {
    //model.deferred.reject();
 }
});

The post Add GET parameter to a backbone fetch model appeared first on Techy Things.

- Use Fildder to inspect network traffic, make sure of what is returned by the server has multiple objects.

- Make sure that your IDs are unique

- If you override the base model idAttribute, make sure that all items have a distinct attribute for the one marked as the ID by idAttribute. In the following example, if two item had the same name, only one of them would show up :

Export.Model = Backbone.Model.extend(
{
  urlRoot: "/apis/destinations",
  selected: false,
  idAttribute: "name",
  (...)

The post Why my Backbone collection fetch returns only one item appeared first on Techy Things.

self.insertView("#destinations-list", new ExportDestinations.Views.Row({model: model}));

The post Uncaught TypeError: this._ensureElement is not a function appeared first on Techy Things.