Javascript Templates with Regular Expressions

Question

I'm experimenting with client side templates and came up with the following concept:

<table>
    <tr bind-template="colors,<td style='color:@color'>@name</td>"></tr>
</table>

and I have a javascript object as in:

var colors = [{name: 'white', color: '#FFFFFF'},{name: 'black', color: '#000000'}];

So, from the 'bind-template' attribute, I can get to the actual object "colors", and then the template itself

<td style='color:@color'>@name</td>

I'm not good at regular expressions but what I came up with the get the folowing:

<td style='color:#FFFFFF'>white</td>
<td style='color:#000000'>black</td

I simply created a prototype on Array as in:

    Array.prototype.HelperResult = function (template, el) {
        var arr = [];
        var result = null;

        $(this).each(function (index, item) {
            result = template;
            for (var o in item) {
                if (template.indexOf('@' + o) >=0)
                {
                    result = result.replace('@' + o, item[o]);
                }
            }
            arr.push(result);
        });

        $(el).append(arr.join(''));
    };

To me, this seems a bit clunky but it works. Here is how I call this method:

        var templates = $('[bind-template]');

        $(templates).each(function (index) {
            var attr = $(this).attr('bind-template');

            if (attr) {
                var parts = attr.split(',');
                if (parts.length == 2)
                {
                    self[parts[0]].HelperResult(parts[1], this);
                }
            }
        });    

I'm going to clean this up but what I need help with is coming up with a cleaner way to get the values for @color and @name from the iterations, and I guessing it will be in the way of regular expressions which I don't know too well.

Thanks for any ideas. Once again, all this is just a proof of concept :-)

Thanks all,

Answer 1

Why do you want to use regexps? Because they're cool? =)

Your code works well, I think there is no reason to change it much.

The only moments I wanna to notice:

1. I do believe there is no reason to call indexOf() before calling replace() - the last one will do the same work for searching occurrence of the text, so you did the work twice.

2. I guess that we should find all occurrences of @tagname in the template, for cases like

   <td id="@name">@name</td>

So my refactoring would be:

-           if (template.indexOf('@' + o) >=0)
-           {
-               result = result.replace('@' + o, item[o]);
-           }

+           result = result.replace('@' + o, item[o], 'g');

PS But if you wanna do regexp, you may write

            result = result.replace(new RegExp('@' + o, 'g'), item[o]);

and make your code cooler. ;)