Loading Components

From Dreamtsoft Wiki
Jump to: navigation, search

This article outlines the process of loading a prebuilt component into a new component.


Load and render a component with ComponentLoader.

Loading and rendering of a component consists of:

1. Ensure the component is loaded (or has already been loaded) - this is an async call that requires a callback

2. After the component has been loaded, optionally request the component's 'data' from the server using the user supplied 'parms'

3. Render the component on the page by creating the component and calling the component's 'onLoad' method

Here are some examples of loading and rendering components:

// Load component, get data from server and render component
ComponentLoader.loadAndRenderComponent({
   name: 'example_component',
   container: $('.container'),
   parms: { parameters_for_server_data_request },
   additional_data: { properties_added_to_data_after_request_to_server }
});
// Load component and render component without requesting data from server
ComponentLoader.loadAndRenderComponent({
   name: 'example_component',
   container: $('.container'),
   data: { component_data_for_rendering }
});


This method ensures the component is loaded. If it is not, it requests the component from the server. After the component has been loaded, check to see if the options contains the 'data' property. If not, request the component data from the server by calling the server component's 'data' method. Finally, render the component in the specified container by calling the component's 'onLoad' method.

Options object containing the component rendering options:

  • .name - name of the component to load and render
  • .container - container to render component in
  • .attributes - component attributes
  • .parms - parameters to pass to server 'data' request (ignored if .data is specified)
  • .data - if specified, do not request data from server, use this as component data
  • .page - parent page we are loading into
  • .pageContainer - parent container we want to load into (instead of specifing .page)
  • .onComplete - callback when component has been loaded and rendered