Load an HTML object client-side (form)

Question

I have to write a single page application which will use the same 3 forms all over the app, just the action of each one will change. Labels/Inputs will be the same, etc...

I want to make my app fast and very responsiveness, thus, i am wondering if it may be a good idea to dinamically generate the FORM through Javascript each time it has to be loaded, instead of downloading it as HTML from the server.

So, is there any good practice for generating DOM objets throught Javascript ? Is there any way to download the HTML code of each FORM the first time the app is loaded ? Or do I have to build them each time through DOM objets with JS?

Any good practice over here ? I am using node.js, knockout.js, jquery.

Thanks !

Answer 1

You're using knockout, so just have the form as a knockout template:

<script type="text/html" id="MyForm">
   <!-- labels and inputs and other form elements here -->
</script>

then you can use it later in your page like

<form class="foo" data-bind="attr: { action: myAction }, template: 'MyForm'></form>

myAction will be an observable or plain property of the model that you pass to ko.applyBindings , like

ko.applyBindings({ action: '/submit/stuff' }, $('form.foo')[0]);

Knockout has great tutorials and great documentation so check that out too.