JsRender不进行转型for循环 [英] JsRender does not make the transformation for a for loop

查看：91
本文介绍了JsRender不进行转型for循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在code根据的jsfiddle工程; http://jsfiddle.net/arame3333/PTWnq/6/

然而，在我的MVC项目它呈现在网页上的作为;

{{为BusinessUnitName}}•{BusinessUnitName：设计和建造（技术），设计意念，信息通信技术，机械与放大器;电气，安全管理，$ P $对建筑和放大器;出价preparation]}
 {{/的}}

为什么会出现这种情况？

相关code为; 

 ＆LT; UL ID =departmentList＆GT;＆LT;％：Html.DisplayFor（型号=＆GT; model.AdditionalDepartmentList）％＆GT;＆LT; / UL＆GT;＆LT;脚本ID =DepartmentTemplate类型=文/ X-的jQuery-TMPL＆GT;
            {{用于BusinessUnitName}}
                ＆LT;立GT; {{：＃数据}}＆LT; /李＆GT;
            {{/的}}
    ＆LT; / SCRIPT＆GT;功能RefreshDepartments（O）{
        警报（下面是结果）;
        VAR URL ='＆LT;％：Url.Action（GetAdditionalDepartments，DataService的）％＆GT;';
        dataService.getAdditionalDepartments（
            o.EmployeeId，
            RenderDepartments，
            网址
        ）;
    }    RenderDepartments =功能（数据）{
        $（'＃departmentList'）空（）;
        $（'＃departmentList'）HTML（$（'＃DepartmentTemplate'）渲染（数据））;
    };

本数据来源于这里的控制器; 

 公众的ActionResult GetAdditionalDepartments（INT雇员）
        {
            VAR列表= AdditionalDepartment.GetBusinessNamesByEmployeeId（雇员）;
            VAR JSS =新的JavaScriptSerializer（）;
            变种JSON = jss.Serialize（新JsonArrayFormat（list.ToList（）））;
            返回新JsonResult
                       {
                           数据= JSON，
                           JsonRequestBehavior = JsonRequestBehavior.AllowGet
                       };
        }

编辑标记 - 我可以显示不这一切; 

 ＆LT;形式方法=邮报行动=/员工/编辑＆GT;＆LT;输入名称=__ RequestVerificationToken value=\"IM9yFknHf1HKgZbd+UYsyMs9wQKL9dPK8zcRfi5uXTRQl7JvCq/Gr6cVq1wnUnao5Y2IToCDtEb5Vz/KnnxXSEDartM7fE9mQ7Cm7ynsFVE6ST2hhcygJX1ALAP67AXVlBBSf5ozczCctqb8ok+Blw==\"类型=隐藏＆GT;        ＆LT;输入ID =Employee_EmployeeIdNAME =Employee.EmployeeIdVALUE =258型=隐藏＆GT;
        ＆LT;输入ID =Employee_ApproverEmployeeIdNAME =Employee.ApproverEmployeeIdVALUE =340型=隐藏＆GT;
        ＆LT;输入ID =CurrentCostRate_EmployeeIdNAME =CurrentCostRate.EmployeeIdVALUE =258型=隐藏＆GT;
        ＆LT;输入ID =CurrentCostRate_CostRateIdNAME =CurrentCostRate.CostRateIdVALUE =303型=隐藏＆GT;
        ＆LT;输入ID =Employee_UserNameNAME =Employee.UserNameVALUE =aaronchampion类型=隐藏＆GT;
        ＆LT;输入ID =Employee_BusinessUnit_BusinessUnitNameNAME =Employee.BusinessUnit.BusinessUnitNameVALUE =建筑类型=隐藏＆GT;
        ＆LT;＆字段集GT;
            ＆LT;传奇＆gt;编辑员工＆LT; /传说＆GT;            ＆LT;表ID =editTable级=groupBorder＆GT;
                      ＆所述; TR＆GT;
                          ＆LT; TD风格=文本对齐：权利;＆GT;其他部门及LT; / TD＆GT;
                          ＆所述; TD COLSPAN =2＆GT;
                              ＆LT;跨度风格=显示：inline-block的;＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
        $（函数（）{
            $（＃DialogAdditionalDepartmentsAdditionalDepartment）。对话框（{
                表示：淡出，
                宽度：620，
                高度：850，
                标题：亚伦冠军附加部/司，
                模式：真实，
                可调整大小：真实，
                的AutoOpen：假的，
                关闭：函数（）{$（＃DialogAdditionalDepartmentsAdditionalDepartment）HTML（）; }，
                纽扣： {
                    ：函数（）{$（本）.dialog（'接近'）; }，
                    关闭：函数（）{$（＃DialogAdditionalDepartmentsAdditionalDepartment表）提交（）; }
                }
            }）;
        }）;        VAR lockpopupDialogAdditionalDepartmentsAdditionalDepartment = NULL;
        功能callDialogAdditionalDepartmentsAdditionalDepartment（雇员）{
            如果（lockpopupDialogAdditionalDepartmentsAdditionalDepartment！= NULL）回报;
            lockpopupDialogAdditionalDepartmentsAdditionalDepartment = TRUE;
            $获得（'/ AdditionalDepartment / AdditionalDepartments'，
             {雇员：雇员}，
            updateDialogAdditionalDepartmentsAdditionalDepartment
            ）;
        }        功能OnSuccessDialogAdditionalDepartmentsAdditionalDepartment（结果）{
            如果（结果=='OK'）{
                $（＃DialogAdditionalDepartmentsAdditionalDepartment）对话框（亲密）。            }            其他
            如果（typeof运算（结果）=='对象'）{
            $（＃DialogAdditionalDepartmentsAdditionalDepartment）对话框（亲密）。
             RefreshDepartments（结果）;
            }            其他{
                updateDialogAdditionalDepartmentsAdditionalDepartment（结果）;
            }
        }        功能updateDialogAdditionalDepartmentsAdditionalDepartment（数据）{
            lockpopupDialogAdditionalDepartmentsAdditionalDepartment = NULL;
            $（＃DialogAdditionalDepartmentsAdditionalDepartment）的html（数据）;
            $（＃DialogAdditionalDepartmentsAdditionalDepartment表）。当作ajaxForm（{
                beforeSubmit：函数（）{返回$（＃DialogAdditionalDepartmentsAdditionalDepartment表）验证（）有效（）; }，                成功：OnSuccessDialogAdditionalDepartmentsAdditionalDepartment
            }）; //当作ajaxForm
            $（＃DialogAdditionalDepartmentsAdditionalDepartment）对话框（开放）。
            $（＃DialogAdditionalDepartmentsAdditionalDepartment表单输入：可见：首先）。重点（）;
        }
＆LT; / SCRIPT＆GT;
                                ＆LT; A HREF =JavaScript的：callDialogAdditionalDepartmentsAdditionalDepartment（258）＆gt;添加/编辑额外的部门/司＆LT; / A＆GT;＆LT; / SPAN＆GT;
                              ＆所述;微升的id =departmentList＆GT;＆LT;立GT;设计意念＆LT; /李＆GT;＆LT;立GT; ICT和LT; /李＆GT;＆LT;立GT;机械和放大器;放大器;机电LT; /李＆GT;＆LT;立GT;安全管理与LT; /李＆GT;＆LT;立GT;估计＆LT; /李＆GT;＆LT;立GT;人力资源和培训发展与LT; /李＆GT;＆LT; / UL＆GT;
                          ＆LT; / TD＆GT;
                      ＆LT; / TR＆GT;
            ＆LT; / TBODY＆GT;＆LT; /表＆gt;
        ＆LT; /字段集＆GT;    ＆LT; /表及GT;    ＆LT; D​​IV＆GT;
        ＆LT; A HREF =/员工/列表＆GT;返回列表＆LT; / A＆GT;
    ＆LT; / DIV＆GT;    ＆LT;脚本ID =DepartmentTemplate类型=文/ X-的jQuery-TMPL＆GT;
        {{用于BusinessUnitName}}
            ＆LT;立GT; {{：＃数据}}＆LT; /李＆GT;
        {{/的}}
    ＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;
        功能RefreshDepartments（O）{
            警报（下面是结果）;
            VAR URL ='/的DataService / GetAdditionalDepartments';
            dataService.getAdditionalDepartments（
                o.EmployeeId，
                RenderDepartments，
                网址
            ）;
        }        RenderDepartments =功能（数据）{
            $（'＃departmentList'）空（）;
            变种DATA1 = $ .parseJSON（数据）;
            $（'＃departmentList'）HTML（$（'＃DepartmentTemplate'）渲染（数据1）。）;
        };
    ＆LT; / SCRIPT＆GT;        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;


解决方案

 ＆LT;脚本ID =DepartmentTemplate类型=文/ X-的jQuery-TMPL＆GT;
    {{用于BusinessUnitName}}
         ＆LT;立GT; {{：＃数据}}＆LT; /李＆GT;
    {{/的}}
＆LT; / SCRIPT＆GT;

问题是在3空格，这是很难找到的问题，因为 jsfiddle.net 示例工作正常。毕竟尝试检测问题，我问 arame3333 作为HTMP的标记，然后我就尝试了一下，发现在模板的问题，正确的：

 ＆LT;脚本ID =DepartmentTemplate类型=文/ X-的jQuery-TMPL＆GT;
    {{用于BusinessUnitName}}
         ＆LT;立GT; {{：＃数据}}＆LT; /李＆GT;
    {{/对于}}
＆LT; / SCRIPT＆GT;

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>

解决方案 

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

这篇关于JsRender不进行转型for循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
ASP .NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆