Regions In Components

Since regions can also be included inside of component templates, you can do certain things with them inside your component definition. For example, in your calendar app you may have a component and template that represent the month. You want to have a region where all of the Day components will go. Your template for the month component might look like this:

<div class="calender-month">
  <div class="previous-month">prev</div>
  <h1>{{monthName}}</h1>
  <div class="next-month">next</div>
  <div data-region data-id="days"></div>
</div>

Your component now has access to a property called this.days which is defined by the data-id attribute in the region tag. With this you can do multiple things to this region from within your component:

attach

attach will empty out all the current components in the region and insert the new component to the region. componentId is the component that you want to place here and properties is the properties you would like to instantiate the component with.

  this.days.attach(componentId, properties);

insert

insert will add a component to the region at the index you pass it. atIndex is the index of the region you would like to insert your component in. componentId is the component that you want to place here and properties is the properties you would like to instantiate the component with.

  this.days.insert(atIndex, componentId, properties);

append

append will call insert at the last position of the region. componentId is the component that you want to place here and properties is the properties you would like to instantiate the component with.

  this.days.append(componentId, properties);

empty

empty will completely empty the region of all components and close them.

  this.days.empty();

remove

remove will close the component at the particular index that you pass it. atIndex is the index of the component that you would like to remove.

  this.days.remove(atIndex);