-
Notifications
You must be signed in to change notification settings - Fork 1
The Flow of a Chip Page
In this document you will learn what happens from the initial empty page loading into your browser until the page is fully rendered with Chip, and how each component in Chip fits into the whole. When you understand how Chip works it goes from magic to simple.
There are 5 components that make up all of Chip. These few pieces allow you to do a lot. They are:
| Component | Description |
|---|---|
| Template | HTML. Plain, simple, unadulterated HTML. |
| Controller | An object to store data and functions on for use in the Template. |
| Binding | A function registered to an attribute name. Bindings can make HTML change when controller data changes. It is the glue between the Template's HTML and the Controller. |
| Routing | Executes functions when certain URLs are navigated to. |
| App | Pulls the other components together into a single interface. |
Every time a template is inserted into your page it follows these steps:
Clone template: your template is cloned to have a new one ready to insert.
Create controller: a controller will be created to back your template.
Bind bindings: each binding defined in your template will be run, setting up any bindings between the controller and the HTML.
Insert template: your template is inserted into the page.
When your page first loads up it follows these steps:
Empty Page: your Chip application starts off with a mostly empty HTML page. The page's job is to load the stylesheets and javascript the application needs to run.
App creation: your empty page needs to create a new Chip App.
Page initialization: your app will create a root controller, or application controller, for the whole page.
Bindings processed: your app will process the page, looking for attributes that have been registered with binding functions. When an attribute is found, the binding function is called.
Controller data used: bindings will take the value of their attribute and use it as an expression. They pass this string expression to the controller to execute immediately or watch for changes in value to update the HTML.
Routing started: if you are creating a multi-page app, you will start your app listening for URL changes. When a URL is matched, the template for that URL will go through the template flow and be inserted into the page.