JsRender does not make the transformation for a fo

Question

The code works according to JsFiddle; http://jsfiddle.net/arame3333/PTWnq/6/

However in my MVC project it renders on the page as;

{{ for BusinessUnitName }} •{"BusinessUnitName":["Design and Build (Technical)","Architectual Design","ICT","Mechanical & Electrical ","Safety Management","Pre-Construction & Bid Preparation"]} {{/for }}

Why would this happen?

The relevant code is;

<ul id="departmentList"><%: Html.DisplayFor(model => model.AdditionalDepartmentList) %></ul>



<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
            {{ for BusinessUnitName }}
                <li>{{:#data}}</li>
            {{/for }}
    </script>



function RefreshDepartments(o) {
        alert("Here are the results");
        var url = '<%: Url.Action("GetAdditionalDepartments", "DataService")%>';
        dataService.getAdditionalDepartments(
            o.EmployeeId,
            RenderDepartments,
            url
        );
    }

    RenderDepartments = function (data) {
        $('#departmentList').empty();
        $('#departmentList').html($('#DepartmentTemplate').render(data));
    };

The data comes from the controller here;

public ActionResult GetAdditionalDepartments(int employeeId)
        {
            var list = AdditionalDepartment.GetBusinessNamesByEmployeeId(employeeId);
            var jss = new JavaScriptSerializer();
            var json = jss.Serialize(new JsonArrayFormat(list.ToList()));
            return new JsonResult
                       {
                           Data = json,
                           JsonRequestBehavior = JsonRequestBehavior.AllowGet
                       };
        }

Edited markup - I cannot dispaly all of it;

    <form method="post" action="/Employee/Edit"><input name="__RequestVerificationToken" value="IM9yFknHf1HKgZbd+UYsyMs9wQKL9dPK8zcRfi5uXTRQl7JvCq/Gr6cVq1wnUnao5Y2IToCDtEb5Vz/KnnxXSEDartM7fE9mQ7Cm7ynsFVE6ST2hhcygJX1ALAP67AXVlBBSf5ozczCctqb8ok+Blw==" type="hidden">

        <input id="Employee_EmployeeId" name="Employee.EmployeeId" value="258" type="hidden">
        <input id="Employee_ApproverEmployeeId" name="Employee.ApproverEmployeeId" value="340" type="hidden">
        <input id="CurrentCostRate_EmployeeId" name="CurrentCostRate.EmployeeId" value="258" type="hidden">
        <input id="CurrentCostRate_CostRateId" name="CurrentCostRate.CostRateId" value="303" type="hidden">
        <input id="Employee_UserName" name="Employee.UserName" value="aaronchampion" type="hidden">
        <input id="Employee_BusinessUnit_BusinessUnitName" name="Employee.BusinessUnit.BusinessUnitName" value="Construction" type="hidden">
        <fieldset>
            <legend>Edit Employee</legend>

            <table id="editTable" class="groupBorder">


                      <tr>
                          <td style="text-align: right;">Additional Departments</td>
                          <td colSpan="2">
                              <span style="display: inline-block;">

<script type="text/javascript">
        $(function () {
            $("#DialogAdditionalDepartmentsAdditionalDepartment").dialog({
                show: "fade",               
                width: 620,
                height: 850,
                title: 'Additional Departments/Divisions for Aaron Champion',
                modal: true,
                resizable: true,
                autoOpen: false,
                close: function () { $("#DialogAdditionalDepartmentsAdditionalDepartment").html(""); },
                buttons: {
                    "": function () { $(this).dialog('close'); }, 
                    "Close": function () { $("#DialogAdditionalDepartmentsAdditionalDepartment form").submit(); } 
                }
            }); 
        });

        var lockpopupDialogAdditionalDepartmentsAdditionalDepartment = null;
        function callDialogAdditionalDepartmentsAdditionalDepartment(employeeId) { 
            if(lockpopupDialogAdditionalDepartmentsAdditionalDepartment != null) return;
            lockpopupDialogAdditionalDepartmentsAdditionalDepartment = true;
            $.get('/AdditionalDepartment/AdditionalDepartments',
             { employeeId : employeeId }, 
            updateDialogAdditionalDepartmentsAdditionalDepartment
            );
        }

        function OnSuccessDialogAdditionalDepartmentsAdditionalDepartment(result) {
            if (result == 'ok') {
                $("#DialogAdditionalDepartmentsAdditionalDepartment").dialog('close');

            }            

            else
            if(typeof(result) == 'object'){
            $("#DialogAdditionalDepartmentsAdditionalDepartment").dialog('close');
             RefreshDepartments(result);
            }

            else {
                updateDialogAdditionalDepartmentsAdditionalDepartment(result);
            }
        }        

        function updateDialogAdditionalDepartmentsAdditionalDepartment(data) {
            lockpopupDialogAdditionalDepartmentsAdditionalDepartment = null;
            $("#DialogAdditionalDepartmentsAdditionalDepartment").html(data);
            $("#DialogAdditionalDepartmentsAdditionalDepartment form").ajaxForm({


                beforeSubmit: function () { return $("#DialogAdditionalDepartmentsAdditionalDepartment form").validate().valid(); },

                success: OnSuccessDialogAdditionalDepartmentsAdditionalDepartment
            }); //ajaxForm
            $("#DialogAdditionalDepartmentsAdditionalDepartment").dialog('open');
            $("#DialogAdditionalDepartmentsAdditionalDepartment form input:visible:first").focus();
        }
</script>


                                <a href="javascript:callDialogAdditionalDepartmentsAdditionalDepartment(258)">Add/Edit additional departments/divisions</a></span>
                              <ul id="departmentList">

<li>Architectual Design</li>

<li>ICT</li>

<li>Mechanical &amp; Electrical </li>

<li>Safety Management</li>

<li>Estimating</li>

<li>HR and Training Development</li></ul>
                          </td>
                      </tr>


            </tbody></table>
        </fieldset>

    </form>

    <div>
        <a href="/Employee/List">Back to List</a>
    </div>

    <script id="DepartmentTemplate" type="text/x-jquery-tmpl">
        {{ for BusinessUnitName }}
            <li>{{:#data}}</li>
        {{/for }}
    </script>

    <script type="text/javascript">
        function RefreshDepartments(o) {
            alert("Here are the results");
            var url = '/DataService/GetAdditionalDepartments';
            dataService.getAdditionalDepartments(
                o.EmployeeId,
                RenderDepartments,
                url
            );
        }

        RenderDepartments = function (data) {
            $('#departmentList').empty();
            var data1 = $.parseJSON(data);
            $('#departmentList').html($('#DepartmentTemplate').render(data1));
        };


    </script>



        </div>
    </div>

Answer 1

<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
    {{ for BusinessUnitName }}
         <li>{{:#data}}</li>
    {{/for }}
</script>

The problem was in 3 whitespaces, it was hard to find problem, because jsfiddle.net example works fine. After all attempts to detect problem I asked arame3333 for htmp-markup, then I just try it and found, that problem in template, correct one:

<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
    {{for BusinessUnitName}}
         <li>{{:#data}}</li>
    {{/for}}
</script>