BB: Nested GET and SET

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

Babel + JSX

console.clear();

/**
 * Override Backbones Model.get() default to activate
 * nested attribute value selection.
 * @param {string} prop Model property value
 *
 * Example:
 * {
 * 	'contentConfigs': {
 * 		x: 180,
 * 		y: 0
 * 	}
 * }
 * model.get('contentConfigs.x') //180
 */
Backbone.Model.prototype.get = function(prop) {
	if (-1 === prop.indexOf('.')) {
		return this.attributes[prop];
	}

	return _.inject(prop.split('.'), function(object, propName) {
		return object && object[propName];
	}, this.attributes);
}

const data = {
	'contentConfig': {
  	'filters': [],
    'columns': {
    	1: true,
      3: false
    }
  }
};

const Model = Backbone.Model.extend({
	initialize() {
  	this.listenTo(this, 'change:contentConfig', this.coordChange)
  },
  
  coordChange(a,b) {
  	console.log('change', a,b)
  }
})
const coordModel = new Model(data)


console.log('GET')
console.log('x', coordModel.get('contentConfig.columns.3'))
console.log('y', coordModel.get('contentConfig.filters'))

console.log('SET')
function setNestedAttr(model, obj, key) {
	var contentConfig = _.clone(model.get('contentConfig'));
	contentConfig.columns[1] = false;
console.log('contentConfig', contentConfig)
	model.set('contentConfig', contentConfig); // will trigger 'change' and 'change:attr_array' events
}

setNestedAttr(coordModel)