Sometimes you have to do some actions on a set of values in one part of your application and display them in another part of the application. In such cases it is very tempting to write glue code to set the values of the views after a computation.

There is a better way to do this in Sproutcore.

The Sproutcore magic is mostly built upon bindings and observers. Often you can prevent writing glue code by using bindings between objects to share data, and use observers to generate actions or set internal data, or use computed properties when the values need to be sent out.

Let's say we have a set of sliders with their value bound to a controller named sliderController. We need to do a few calculations before actually displaying the outcome in a few labelViews. To do this properly, we will set up a controller that will be the middle man. As it turns out, we also have to do some kind of calculation that includes all four slider values. The outcome of that calculation needs to be used for the final calculation of the label values.

     myApp.myController = SC.Controller.create({
          valueOneBinding: 'myApp.sliderController.valueOne', // slider 1
          valueTwoBinding: 'myApp.sliderController.valueTwo', // slider 2
          valueThreeBinding: 'myApp.sliderController.valueThree', // slider 3
          valueFourBinding: 'myApp.sliderController.valueFour', //slider 4

         myCommonCalculation: function(){
             // our common calculation

             var valueOne = this.get('valueOne');

             var valueTwo = this.get('valueTwo');

              // do some calculation

             return calculatedValue;

         }.property('valueOne','valueTwo','valueThree','valueFour').cacheable(),

         myOutputOne: function(){
              val commonCalc = this.get('myCommonCalculation');
              // do some other stuff
              // now return the value you want to display
              return myOutput;
         }.property('myCommonCalculation').cacheable(),

         myOutputTwo: function(){
              val commonCalc = this.get('myCommonCalculation');
              // do some other stuff
              // now return the value you want to display for the second value
              return myOutputTwo;
         }.property('myCommonCalculation').cacheable()

          // etc...
     });

A small explanation: the bindings at the top will automagically create a connection between the slider values on the sliderController and the current controller. The actual value can be obtained by getting the property using a name without 'Binding'.

.property(stuff) means that the function you define will act as a property watching the properties mentioned in stuff, and recalculate when those properties change. cacheable() means that the return value will be cached, so if a few consequent reads of this property take place without the values in stuff changed, the function will return the value from memory instead of recomputing.

We can now create a valueBinding from our labelView to the computed property we want to show:

      label: SC.LabelView.design({
           layout: { top: 0, right: 0, bottom: 0, left: 10 },
           valueBinding: 'myApp.myController.myOutputOne'
      })