Question

I suppose there are people who encountered underscore problem, so I found something here:
Using Underscore.js with ASP.NET

and the solution was to add:

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g,      // print value: {{ value_name }}
                  evaluate    : /\{%([\s\S]+?)%\}/g,   // excute code: {% code_to_execute %}
                  escape      : /\{%-([\s\S]+?)%\}/g}; // excape HTML: {%- <script> %} prints &lt;script&gt;

to underscore.js

so I opened underscore.js and found the _.templateSettings section, and replaced with the above solution, still with no luck.

Is there anywhere that I’m missing? here’s my code looks like:

<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>#</th>
            <th>Keyword</th>
            <th>Corresponding Field</th>
            <th><a href="#" class="btn pull-right" id="one-to-one-add">Add</a></th>
        </tr>
    </thead>
    <tbody>
        <% _.each(keywords, function(keyword, key, list) { %>
        <tr>
            <td><label class="checkbox"><input type="checkbox" /></label></td>
            <td><%= key + 1 %></td>
            <td><input name="keywords[<%= key %>][keyword]" class="input-medium keyword-name" type="text" value="<%= keyword.name %>" /></td>
            <td>
                <select class="keyword-field">
                    <% _.each(fields, function(field, key, list) { %>
                    <option name="keywords[<%= key %>][field]" value="<%= field.id %>" <% if (keyword.fieldId == field.id) { %>selected<% } %>><%= field.name %></option>
                    <% }); %>
                </select>
            </td>
            <td class="align-right"><a href="#defining-keyword" data-toggle="modal">Define</a></td>
        </tr>
        <% }); %>
    </tbody>
</table>

Answer 1

so this is what I end up doing:

<script type="text/javascript">
    $(document).ready(function ()
    {            
        _.templateSettings = {
            interpolate: /\<\@\=(.+?)\@\>/g,
            evaluate: /\<\@(.+?)\@\>/g
        };
    });
</script>

above code inside html head

and change to <@ … @>
so this is what my code ends up:

<tbody>
    <@ _.each(keywords, function(keyword, key, list) { @>
    <tr>
        <td><label class="checkbox"><input type="checkbox" /></label></td>
        <td><@= key + 1 @></td>
        <td><input name="keywords[<@= key @>][keyword]" class="input-medium keyword-name" type="text" value="<@= keyword.name @>" /></td>
        <td>
            <select class="keyword-field">
                <@ _.each(fields, function(field, key, list) { @>
                <option name="keywords[<@= key @>][field]" value="<@= field.id @>" <@ if (keyword.fieldId == field.id) { @>selected<@ } @>><@= field.name @></option>
                <@ }); @>
            </select>
        </td>
        <td class="align-right"><a href="#defining-keyword" data-toggle="modal">Define</a></td>
    </tr>
    <@ }); @>
</tbody>