title: Creating a custom widget in Dojo, error calling functions within the new widget?
body: <p>The issue is i am following the tutorial <a href="http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/" rel="nofollow">here</a> and the functionality of the new widget work fine until i hover over the widget where a this._changeBackground method is being called from "on" listeners, i get the error <code>TypeError: this._changeBackground is not a function</code></p>
  
  <p>The final code as implemented from tutorial looks like this:</p>
  
  <pre><code>define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!/JS/Allatus/Test.html", "dojo/dom-style", "dojo/_base/fx", "dojo/_base/lang","dojo/on"],
      function(declare, WidgetBase, TemplatedMixin, template, domStyle, baseFx, lang , on){
          return declare([WidgetBase, TemplatedMixin], {
              // Some default values for our author
              // These typically map to whatever you're handing into the constructor
              name: "No Name",
              // Using require.toUrl, we can get a path to our AuthorWidget's space
              // and we want to have a default avatar, just in case
              avatar: require.toUrl("JS/Allatus/custom/android_vector.jpg"),
  
             bio: "",
  
              // Our template - important!
              templateString: template,
  
              // A class to be applied to the root node in our template
              baseClass: "authorWidget",
  
              // A reference to our background animation
              mouseAnim: null,
  
              // Colors for our background animation
              baseBackgroundColor: "#fff",
              mouseBackgroundColor: "#def",
              postCreate: function(){
      // Get a DOM node reference for the root of our widget
      var domNode = this.domNode;
  
      // Run any parent postCreate processes - can be done at any point
      this.inherited(arguments);
  
      // Set our DOM node's background color to white -
      // smoothes out the mouseenter/leave event animations
      domStyle.set(domNode, "backgroundColor", this.baseBackgroundColor);
      // Set up our mouseenter/leave events - using dojo/on
      // means that our callback will execute with `this` set to our widget
      on(domNode, "mouseenter", function (e) {
          this._changeBackground(this.mouseBackgroundColor);
      });
      on(domNode, "mouseleave", function (e) {
          this._changeBackground(this.baseBackgroundColor);
      });
  },
  _changeBackground: function(toCol) {
      // If we have an animation, stop it
      if (this.mouseAnim) { this.mouseAnim.stop(); }
  
      // Set up the new animation
      this.mouseAnim = baseFx.animateProperty({
          node: this.domNode,
          properties: {
              backgroundColor: toCol
          },
          onEnd: lang.hitch(this, function() {
              // Clean up our mouseAnim property
              this.mouseAnim = null;
          })
      }).play();
  },
  _setAvatarAttr: function(av) {
      // We only want to set it if it's a non-empty string
      if (av != "") {
          // Save it on our widget instance - note that
          // we're using _set, to support anyone using
          // our widget's Watch functionality, to watch values change
          this._set("avatar", av);
  
          // Using our avatarNode attach point, set its src value
          this.avatarNode.src = av;
      }
  }
          });
  });
  </code></pre>
  
  <p>Any Ideas Why I cant call another function within my customize widget ? is that just a bug or i am doing something wrong?</p>