Question

I am reading through titanium best practises and i was wondering why this doesnt appear to work can some one tell me whats changed with the api?

https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices

ui/ToggleBox.js – A custom check box

   function ToggleBox(onChange) {
      this.view = Ti.UI.createView({backgroundColor:'red',height:50,width:50});

      //private instance variable
      var active = false;

      //public instance functions to update internal state, execute events
      this.setActive = function(_active) {
        active = _active;
        this.view.backgroundColor = (active) ? 'green' : 'red';
        onChange.call(instance);
      };

      this.isActive = function() {
        return active;
      };

      //set up behavior for component
      this.view.addEventListener('click', function() {
        this.setActive(!active);
      });
    }
    exports.ToggleBox = ToggleBox;

Sample usage in app.js

var win = Ti.UI.createWindow({backgroundColor:'white'});
var ToggleBox = require('ui/ToggleBox').ToggleBox;

var tb = new ToggleBox(function() {
  alert('The check box is currently: '+this.isActive());
});
tb.view.top = 50;
tb.view.left = 100;

win.add(tb.view);

it doesn’t seem to want to return the setActive method when called from the add event listener?

Answer 1

The “this” in your click listener isn’t what you’re expecting it to be. (It’s probably the view.) Because your function is already the ToggleBox context, the easiest solution is to just use a direct reference to setActive. “this.” is only necessary for the API you’re exposing for other code.

function ToggleBox(onChange) {
  var view = this.view = Ti.UI.createView({backgroundColor:'red',height:50,width:50});

  //private instance variable
  var active = false;

  //public instance functions to update internal state, execute events
  var setActive = this.setActive = function(_active) {
    active = _active;
    view.backgroundColor = (active) ? 'green' : 'red';
    onChange.call(instance);
  };

  var isActive = this.isActive = function() {
    return active;
  };

  //set up behavior for component
  view.addEventListener('click', function() {
    setActive(!active);
  });
}
exports.ToggleBox = ToggleBox;