CODEWITHSUNDEEP
javascriptdesign-patternsbackbone.jsrequirejsfacade
Gerben Wiersma
Gerben Wiersma

Reputation: 41

Backbone Facade/Mediator Pattern Challenge

I'm toying around with the aura(http://github.com/addyosmani/backbone-aura) example implementing Facade and Mediator patterns in Backbone.js. I hope someone is familiar with the concept.. I'm trying to read variables (for instance i in this example in the renderComplete section of the facade. how can i (if even possible) access the functions/variables of Appview?

The console.log(this.i); returns an undefined so i'm guessing i've lost scope somewhere

define([
  'jquery',
  'underscore', 
  'backbone',
  'text!templates/master.html',
  '../aura/mediator',
  '../aura/facade',
  '../subscriptions'
], function($, _, Backbone, masterTemplate, Mediator, Facade){

var AppView = Backbone.View.extend({
  el: "body",
  i : 5,

  template: _.template(masterTemplate),

  facade: {
    routeChange: Facade.extend("masterViewChange", "routeChanged", function(route){
      console.log("Change view to " + this.i);
    }),
    renderComplete: Facade.extend("postMasterRender", "masterRendered", function(){
      console.log(this.i);  
    })
  },

  events: {},

  initialize: function() {
    this.render();
    Mediator.publish("masterRendered", this);
  },

  render: function() {
   $(this.el).html(this.template());
  }

});
  return AppView;
});

Upvotes: 2

Views: 1668

Answers (2)

Bernardo
Bernardo

Reputation: 1030

You need to bind your facade methods to your View context by doing something like this in the initializer for the View:

initialize: function()
{
    _.bindAll(this, "facade.routeChange", "facade.renderComplete");
}

Though I question whether _.bindAll can handle this case where the function you want to bind is a property of another object.

Upvotes: 0

SalimBensiali
SalimBensiali

Reputation: 36

When you publish the 'masterRendered' notification, your are passing a reference to the current view as a second param (this). This second param is passed to the callback function you defined in renderComplete. So you need to write something like this:

function (obj) { console.log(obj.i); }

Instead of:

function () { console.log(this.i); }

Regards

Upvotes: 2

Related Questions