Cannot get Backbone Picky to work (models not extended properly)

Question

I'm trying to use Backbone Picky, as per this example:

Model & Collection setup https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/blob/7a51af4e6ea3cb400813e4dd87fab3e072c311c0/assets/js/entities/header.js

Code execution: https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/blob/7a51af4e6ea3cb400813e4dd87fab3e072c311c0/assets/js/apps/header/list/list_controller.js

When I execute I get model.select() select is not defined:

I wrote this fiddle here: http://jsfiddle.net/jmsherry/M9E24/1/

// Backbone.Picky, v0.2.0
// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
// Distributed under MIT license
// http://github.com/derickbailey/backbone.picky

Backbone.Picky=function(a,b){var c={};c.SingleSelect=function(a)  {this.collection=a},b.extend(c.SingleSelect.prototype,{select:function(a){a&&this.selected===a||(this.deselect(),this.selected=a,this.selected.select(),this.trigger("select:one",a))},deselect:function(a){this.selected&&(a=a||this.selected,this.selected===a&&(this.selected.deselect(),this.trigger("deselect:one",this.selected),delete this.selected))}}),c.MultiSelect=function(a){this.collection=a,this.selected={}},b.extend(c.MultiSelect.prototype,{select:function(a){this.selected[a.cid]||(this.selected[a.cid]=a,a.select(),d(this))},deselect:function(a){this.selected[a.cid]&&(delete this.selected[a.cid],a.deselect(),d(this))},selectAll:function(){this.each(function(a){a.select()}),d(this)},selectNone:function(){0!==this.selectedLength&&(this.each(function(a){a.deselect()}),d(this))},toggleSelectAll:function(){this.selectedLength===this.length?this.selectNone():this.selectAll()}}),c.Selectable=function(a){this.model=a},b.extend(c.Selectable.prototype,{select:function(){this.selected||(this.selected=!0,this.trigger("selected",this),this.collection&&this.collection.select(this))},deselect:function(){this.selected&&(this.selected=!1,this.trigger("deselected",this),this.collection&&this.collection.deselect(this))},toggleSelected:function(){this.selected?this.deselect():this.select()}});var d=function(a){a.selectedLength=b.size(a.selected);var c=a.selectedLength,d=a.length;return c===d?(a.trigger("select:all",a),void 0):0===c?(a.trigger("select:none",a),void 0):c>0&&d>c?(a.trigger("select:some",a),void 0):void 0};return c}(Backbone,_);


console.log(Backbone);
//You'll be able to see Backbone.Picky in there...

//Create a class
var Person = Backbone.Model.extend({
      initialize: function(){
          console.log('pre extend: ', this);
        var selectable = new Backbone.Picky.Selectable(this);
          console.log('selectable: ', selectable);
        _.extend(this, selectable);
          console.log('post extend: ', this);
      }
    });

//create an instance
var james = new Person();

//fire the select function -> select is undefined
james.select();

That illustrates the problem: It just seems like the selectable aspects are not being put in when the model is extended...

What am I doing wrong?

user1775718 user1775718 · Accepted Answer · 2014-06-03T22:57:01

SO, here is the answer...

The _.extend()... I was using Lodash. Lodash's modern build aliases extend() to it's version assign(). assign() operates in a different manner and hence was not updating the object with the new properties (which are put into the prototype in Picky...)

TL;DR You need to use the Lodash.underscore build when dealing with backbone (you may be able to do a more inclusive custom build, but from what I've seen that's the general gist).

Cannot get Backbone Picky to work (models not extended properly)

1 Answers