CanJS: scope lookup examples

The ./ is used to refer to current scope without parent lookup. The ../ is used to look up values in parent scope. A scope is defined:

either for a helper like: {{#each items}} here current scope {{./}} will refer to the current element of items {{/each}}
or for a component: <bit-tabs> here {{./}} will refer to bit-tabs' viewModel </bit-tabs>.

The lookup is done automatically, but if one and the same property is defined (or even undefined but still intended to be) for both the current scope and the parent scope, then you may want to specify which one you want to refer to by using {{../}} to climb up to parent or by {{./}} to stay on current scope.

In the following example we climb up to the viewModel scope bypassing bit-panel and bit-tabs which also have the same someProp:

<my-page some-prop="view model value">
  <bit-tabs some-prop="tabs value">
    <bit-panel some-prop="panel value">
      My view model property is: {{../../someProp}}     <<< will render "view model value"
    </bit-panel>
  </bit-tabs>
</my-page>

Sometimes its not necessary, but its still faster, and more important its a must in case CanJS 2.3 with its one-way "child-to-parent" binding syntax:

<my-page>
  One way bound to child: {{myProp}}               <<< will render "my value" set by child-component if "../" is used.
  <parent-component>
    <child-component {^child-prop}="../myProp">    <<< without "../" it will set property on parent-component.
      <input {($value)}="childProp" /> [my value]
    </child-component>
  </parent-component>
</my-page>

For CanJS 3.0 see docs here: current context lookup and parent context lookup.

ilyavf/README.md