I'm planning to use Metro UI to write quite a complex single page application and I'd like some advice on how to structure it. I want it to resemble a desktop application so I will be making use of <div class="window">...</div> for application windows.
Should I create all of the windows in index.html upfront and set them as hidden or do I create them as fragments of html in separate files and use jquery to retrieve them and inject them into the DOM as and when required?
If the user closes a <div class="window">...</div> is it, all its child elements and event listeners automatically removed from the DOM?
Although I have a lot of experience with desktop apps I'm quite a newbie at web stuff (esp. front ends) so any top tips you guys have of how you breakdown the html and js I'd be grateful for.
Thanks.
Advice required on structuring a complex SPA
var clonedDiv = $('#yourdiv').clone();
clonedDiv.attr("id", "newId");
var index = Metro.utils.random(0, 3);
Desktop.createWindow({
width: 300,
icon: "<span class='mif-"+w_icons[index]+"'></span>",
title: w_titles[index],
content: clonedDiv
});
clonedDiv.attr("id", "newId");
var index = Metro.utils.random(0, 3);
Desktop.createWindow({
width: 300,
icon: "<span class='mif-"+w_icons[index]+"'></span>",
title: w_titles[index],
content: clonedDiv
});