How to avoid writing HTML tags in javascript

questions :


In my application, I sometimes have to create elements dynamically, so I create them in javascript, but it make it hard for maintenance.

For example:

enter image description here

The above image is the information window when I click a point in the map, and in our application we have a similar requirement, we use javascript to create the whole DOM.

I do not think this is a good idea, any suggestion?

 

 

————————————————-

Answer :

You’ve said you’re using Prototype. You could make use of its Template class. You could even store templates on the server and demand-load them via ajax if you like (although I’d worry about the number of HTTP requests), in order to keep your code and your markup completely distinct.

For instance, here’s a Prototype template for building a table row:

<tr><td>#{name}</td><td>#{description}</td></tr>

You have various options for where and how to store the template text:

  • You can put it in its own file you demand-load via Ajax, although if there are a lot of them it could start being excessive HTTP requests.
  • You can put them in your JavaScript, but then you’ve tied your markup to your JavaScript and I get the impression you don’t want to do that.
  • You can include them in your main page with display: none, extract them as HTML, and then reuse them.

In all three of those cases, eventually you end up with a string containing the template text, e.g.:

var rowString = "<tr><td>#{name}</td><td>#{description}</td></tr>";

(But again, you may not need to put it actually in the JavaScript.)

From the string, you make a template:

var rowTemplate = new Template(rowString);

And then use it:

$('tableBodyId').insert({
    bottom: rowTemplate.evaluate({
        name:        bizobject.name.escapeHTML(),
        description: bizobject.description.escapeHTML()
    })
});

Note that (sadly) you do have to do the HTML escaping yourself (because Prototype’s templates aren’t specifically tied to HTML, you can use them for any situation where you have a templated string). Or you can make a fairly small change to the Template class to do it for you (that’s what I did, when I was using Prototype; I actually made it possible to call functions on template items).

 

 

 

javascript

Facebook Comments

Website Comments

  1. custom silicone bracelets
    Reply

    Hey I know this is off topic but I was wondering if you
    knew of any widgets I could add to my blog that automatically tweet my newest
    twitter updates. I’ve been looking for a plug-in like this for quite some time and was
    hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates. https://www.fone2.com

  2. wrist bracelet
    Reply

    Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!

    Appreciate it

Post a comment