gistfile1.js

// controller exposes properties to the view
// in this case, the default model will be an AdLayout
// but each additional property defined here will be exposed
// to the template when it renders
App.ViewLayoutController = Ember.ObjectController.extend({
	network: "Chartboost",
	platform: "Android",

    adSizes: function() {
      var network = this.get('network');
      var platform = this.get('platform');

      // lookup sizes array based on network and platform values
      // .....
      var sizes = [
        { width: 900, height: 1600 },
        { width: 900, height: 1400 },
        { width: 1120, height: 1500 },
        { width: 1500, height: 1120 },
        { width: 1560, height: 750 },
        { width: 1600, height: 900 }
      ];

      return sizes;
    }.property('network', 'platform') //this says to update adSizes whenever either of these properties change
});


// view should interact with any DOM stuff and update controller values
App.ViewLayoutView = Ember.View.extend({
	// triggered whenever the view is rendered and our view has been added to the DOM
	didInsertElement: function() {
	  //update controller value whenever select option changes
	  var controller = this.get('controller');
	  var platformOrNetworkChange = function() {
	    controller.set( 'platform', $('#ad-platform-select-id')).val()  );
	    controller.set( 'network', $('#ad-network-select-id')).val()  );
	  }
	  document.on( "change", "#ad-platform-select-id", platformOrNetworkChange);
	  document.on( "change", "#ad-network-select-id", platformOrNetworkChange);
	}
});