Sunday, April 22, 2012

SC.outlet

Whenever in a Sproutcore app a controller or a state needs to reference a view which is deeply nested in the ui tree there is a good case to use SC.outlet.

The outlet creates a layer of indirection between the view and the other layers leaving to the view the responsibility to provide shortcuts to its inner objects, decoupling the layout from the application logic.

An example of SC.outlet usage is shown in the todos application described in the Getting Started guides.

Without outlet:

...
TodosThree.mainPage = SC.Page.design({
  // conventional design
  // https://github.com/sproutcore/getting-started/blob/master/apps/todos_three/resources/main_page.js#L4
...
TodosThree.SHOWING_APP = SC.State.design({
  enterState: function() {
    TodosThree.mainPage.get('mainPane').append();
    TodosThree.mainPage.mainPane.newTodoField.field.becomeFirstResponder();
  },

Notice how the view design trickles down to the state layer (a part of the controller layer, which should be presentation agnostic).

With outlet, layer boundaries are instead clearly separated again:

...
TodosThree.mainPage = SC.Page.design({
  field: SC.outlet('mainPane.newTodoField.field'),
...
TodosThree.SHOWING_APP = SC.State.design({
  enterState: function() {
    TodosThree.mainPage.get('mainPane').append();
     TodosThree.mainPage.get('field').becomeFirstResponder();
  },

No comments: