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 !

Knockout does this. When you say you are "using" knockout, can you show us how? WhatHaveYouTried? — Kyeotic, Nov 21 '12 at 19:19
I need a way to do it unobstrusively, without injecting HTML code inside the JS variable — user1017926, Nov 21 '12 at 20:08
I think this answers my question, as I also use underscore lib http://stackoverflow.com/questions/4778881/how-to-use-underscore-js-as-a-template-engine — user1017926, Nov 21 '12 at 20:18
An this http://knockoutjs.com/documentation/template-binding.html — user1017926, Nov 21 '12 at 20:18
You do not need to use underscore for templating. Knockout's built in template engine works pretty well. — Kyeotic, Nov 22 '12 at 01:54

score 1 · Accepted Answer · answered Dec 14 '12 at 05:24

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.

Load an HTML object client-side (form)

1 Answers1