ANCHORView partials

A component is created by associating a controller with a view, this page goes into more detail about how view partials relate to components. For more general concepts see the template syntax documentation.

While a component's controller is associated with a single view, it can contain sub-views defined as view partials. Components can also accept other views passed in as attributes.

ANCHORScope

By default a view partial inherits the scope where it is instantiated.

<index:>
  {{foo}}
  {{with #root.bar as #bar}}
    <view is="my-partial"></view>
  {{/with}}

<my-partial:>
  i can render {{foo}} and {{#bar}}

A view partial associated with a component follows the component scope rules. A view partial used inside a component will inherit the scope of the scope of the component.

ANCHORwithin

There are times when you may want your partial to use the scope where it is used rather than where it is called. This is generally useful for meta-programming where a component author wants to allow the component user to define a custom representation. The within keyword lets you control this behavior.

<!-- usage -->
<dropdown list="{{users}}">
  <item within>
    <!-- accessing #item which is only defined inside the dropdown component -->
    <icon user-id="{{#item.id}}"> {{#item.name}}
  </item>
</dropdown>

<index: attributes="item">
  {{each @list as #item}}
    {{@item}}
  {{/each}}

Example: within attribute

Note - This example is using derby-standalone which has a slightly different syntax for defining templates at the moment.

ANCHORinherit

There are some cases where you would like to instantiate a component and pass along the attributes of the current controller. The inherit keyword will allow you to do this.

<index:>
  {{@foo}}
  <modal inherit></modal>

<modal:>
  {{@foo}}

Example: component inheritance

Note - This example is using derby-standalone which has a slightly different syntax for defining templates at the moment.

ANCHORextend

It is possible to override another component's functionality while preserving it's view. You can do this with the extend keyword, your component must implement the view functions defined by the extended component. This can be done with prototypical inheritance and then overriding any functions you want to customize.

Example: extending components

Note - This example is using derby-standalone which has a slightly different syntax for defining templates at the moment.

ANCHORimport

If you just want to reuse a view partial the import keyword is probably more appropriate. See the namespaces and files documentation for more details.

ANCHORProgramatic view management

view = this.getView(name)

  • name the name of the view
  • view a template object representing the view

It is possible to access the views in a component's namespace from the controller. This may be used in conjunction with setAttribute to override a component's default rendering. An example use case would be to set a default template and then allow the user of the component to pass in a template to override the default.

See the attributes documentation for more information on using setAttribute.

ANCHORComponent tracking

Derby components are tracked in the DOM with an HTML comment tag. This allows components to be responsible for arbitrary DOM content, for example two table rows that otherwise cannot be wrapped by any other DOM elements.

<!-- namespace:component:name -->

ANCHORDebugging

A relatively quick way to inspect a component for debugging is to find it's comment in the browser's DOM inspector. In modern browsers clicking on the comment allows you to reference it in the console with $0. Once you have a reference to the comment tag you can access it's controller with $0.$component and it's model data with $0.$component.model.get()

ANCHORderby-debug

There is a plugin which makes accessing your components from the console even more accessible that is recommended for development. Read more about derby-debug.

Edit on GitHub