Django like templates in Javascript

9 Responses to "Django like templates in Javascript"

• 
  Christof

  April 5th, 2009, 6:54 p.m.

  I think eval is somehow evil (and slow). I guess a better substitute would be to simply use ``return data;``. Should be the same, although I have not tested it.

• 
  Christof

  April 5th, 2009, 6:55 p.m.

  Sorry, bbcode messed up my post, should have been:

  return data[n]
  

• 
  Fraser

  April 5th, 2009, 7:03 p.m.

  As Christof says, the use of eval in this case is inadvisable as it leaves you vulnerable to injection attacks. For example, the following would result in an alert dialog being shown:

  sformat(
    "Hello, {{ name; alert('Nasty code goes here') }}!",
    {name:"World"}
  );
  

• 
  eelco

  April 5th, 2009, 7:04 p.m.

  How about this one instead:

  http://dojotoolkit.org/book/dojo-book-0-9/part-5-dojox/dojox-dtl [dojotoolkit.org]

• 
  Dougal Matthews

  April 5th, 2009, 8:27 p.m.

  I'm not really sure why anybody would want to do this?

  Care to share a usecase?

• 
  Will McGugan

  April 5th, 2009, 9:03 p.m.

  Christof, the reason I went with eval is that it could handle nested objects. so something like “{{ post.body }}” would work.

  Fraser, granted, although if the template doesn't come from an external source like an AJAX request, it shouldn't be an issue.

  eelco, that's pretty neat.

  Dougal, its more elegant than string concatenation, IMHO.

  html = sformat("<h1>{{ post.header }}</h1><p>{{ post.body }}</p>", {post:post});
  

  Verus:

  html="<h1>" + post.header + "</h1><p>" + post.body + "</p>";
  

• 
  rgz

  April 5th, 2009, 11:09 p.m.

  Yay! So I'm not that crazy! I wrote this one for all my js applications, note that it doesn't affect the original string (the first version did), also note that unmatched fields are left in the result, this is to use it in further substitutions, i.e. for writing template templates.

  /**
   * Template format tf
   * @argument values {object} Completa la plantilla con un objeto tipo diccionario.
   */
  String.prototype.tf = function(values){
      var text = this.toString()
      for (var name in values){
          text = text.replace(new RegExp("{" + name + "}"  , ['g']), values[name])
      }
      return text
  }
  

• 
  WIll McGugan

  April 5th, 2009, 11:14 p.m.

  RGZ, great minds think alike or fools seldom differ? ;-)

• 
  m0n5t3r

  April 6th, 2009, 12:54 a.m.

  When I needed something like that, I went with python-style sprintf (named arguments) and wrote a jQuery plug-in [plugins.jquery.com] :)

  so my code would look like

  var s1 = $.sprintf('Hello, %(name)s!', {'name': 'world'});
  // or, simpler:
  var s2 = $.sprintf('Hello, %s!', 'world');
  

  the less typing, the better :D