I found another example by Curtis Cummings where he creates an instance of his Controls, just like how my Control is created and calling it within the $.ready. I've tried this by converting my Component to a Control and it does work. See part 3 for the whole code example. The benefit with this approach is the applications html is already loaded in the DOM and your only inserting the mustache templates from the elements ID name for the Control.
What is the difference between a Control and Component, what will I lose by using a Control instead of a Component? My biggest concern is I'll still have the same problem in the future if I really need to use a Component! So this isn't really a fix just away around it.
Below is what's in the $.ready from Curtis's example:
- $(document).ready(function(){
- $.when(Category.findAll(), Contact.findAll()).then(function(categoryResponse, contactResponse){
- var categories = categoryResponse[0],
- contacts = contactResponse[0];
- new Create('#create', {
- categories: categories
- });
- new Filter('#filter', {
- contacts: contacts,
- categories: categories
- });
- new Contacts('#contacts', {
- contacts: contacts,
- categories: categories
- });
- });
- });