Saturday, 7 September 2013

Backbone view not listeningTo a model change

Backbone view not listeningTo a model change

Data structure:
- Measure (collection)
- Measure (model)
- beats (c)
- beat (m)
- on/off (attribute)
- representations (c)
- representation (m)
- currentType (attribute)
- previousType (a)
The representation model is getting called via the transition function,
and I notice the change via a console printout, however, the View is not
registering the change at all. I have access to click events, so I know
the view's el is correct. Why is the listenTo not working in the view?
representaiton model:
define([
'underscore',
'backbone'
], function(_, Backbone) {
var RepresentationModel = Backbone.Model.extend({
representationType: undefined, //should override this each time
previousRepresentationType: undefined,
initialize: function(options){
this.representationType = options.representationType;
this.previousRepresentationType = 'null';
},
transition: function(newRep){
this.previousRepresentationType = this.representationType;
this.representationType = newRep;
console.error('model change : ' + this.previousRepresentationType +
' ' + this.representationType);
}
});
return RepresentationModel;
});
measureRepresentation View:
define([…], function(…){
return Backbone.View.extend({
initialize: function(options){
if (options) {
for (var key in options) {
this[key] = options[key];
}
}
//Dispatch listeners

//this was the old way, so I changed to the new listenTo to take
advantage of when the view is destroyed.
//this.model.bind('change', _.bind(this.transition, this));
this.listenTo(this.model, 'change', _.bind(this.transition, this));
this.render();
},
render: function(){
// compile the template for a representation
var measureRepTemplateParamaters = {…};
var compiledTemplate = _.template( MeasureRepTemplate,
measureRepTemplateParamaters );
// put in the rendered template in the measure-rep-container of the
measure
$(this.repContainerEl).append( compiledTemplate );
this.setElement($('#measure-rep-'+this.measureRepModel.cid));
// for each beat in this measure
_.each(this.parentMeasureModel.get('beats').models, function(beat,
index) {
measurePassingToBeatViewParamaters = {…};
};
new BeatView(measurePassingToBeatViewParamaters);
}, this);
return this;
},
transition: function(){
console.warn('getting in here'); //NEVER GET HERE
console.log(this.model.get('previousRepresentationType') + '|' +
this.model.get('representationType'));
}
});
});

No comments:

Post a Comment