JsRender不會爲for循環進行轉換

Question

該代碼根據JsFiddle工作; http://jsfiddle.net/arame3333/PTWnq/6/

但是在我的MVC項目中，它在頁面上呈現爲;

{{BusinessUnitName}} {「BusinessUnitName」：[「Design and Build（技術）」，「Architectual Design」，「ICT」，「Mechanical & Electrical」，「Safety Management」 & Bid Preparation「]} {{/ for}}

爲什麼會發生這種情況？

相關的代碼是;

<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)); 
    }; 

數據來自這裏的控制器;

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 
         }; 
     } 

編輯標記 - 我不能顯示所有的;

<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> 

的問題是在3個空格，這是很難找到的問題，因爲jsfiddle.net例如工作正常。所有試圖發現問題後，我問arame3333爲HTMP的標記，然後我就嘗試了一下，發現，在模板這個問題，正確的：

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