JsRender не выполняет преобразование для цикла for

Код работает согласно JsFiddle; http://jsfiddle.net/arame3333/PTWnq/6/

Однако в моем проекте MVC он отображается на странице как;

{{ for BusinessUnitName }} •{"BusinessUnitName":["Проектирование и строительство (техническое)","Архитектурный дизайн","ИКТ","Механика и электрика","Управление безопасностью","Подготовка к строительству и подготовка к торгам" ]} {{/за }}

Почему это произошло?

Соответствующий код;

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

person arame3333    schedule 19.09.2012    source источник


Ответы (1)


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

Проблема была в 3-х пробелах, было сложно найти проблему, потому что пример jsfiddle.net работает нормально. После всех попыток обнаружить проблему я запросил у arame3333 хтмп-разметку, потом просто попробовал и обнаружил, что проблема в шаблоне, исправь:

<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
    {{for BusinessUnitName}}
         <li>{{:#data}}</li>
    {{/for}}
</script>
person webdeveloper    schedule 19.09.2012
comment
Я добавил дополнительную информацию, которую вы запросили в вопросе. - person arame3333; 19.09.2012
comment
@arame3333 arame3333 Трудно понять проблему, без отладки используйте две точки останова (поместите одну в действие return new JsonResult), а другую в javascript RenderDepartments и сравните результаты. - person webdeveloper; 19.09.2012
comment
Данные выглядят так, как будто это точка останова, которую вы предлагаете; {\BusinessUnitName\:[\Дизайн и строительство (технический)\,\Архитектурный дизайн\,\ИКТ\,\Механические и электрические устройства\,\Управление качеством\]} - person arame3333; 19.09.2012
comment
@arame3333 Попробуйте parseJSON, а также проверьте функцию javascript (я использую firebug). - person webdeveloper; 19.09.2012
comment
@arame3333 arame3333 Извините за путаницу, я удаляю это (я говорю об обновлении). Вот демо: jsfiddle.net/PTWnq/7 - person webdeveloper; 19.09.2012
comment
Перед parseJson данные выглядят так; data {\BusinessUnitName\:[\Design and Build (Technical)\,\Architectural Design\,\ICT\,\Mechanical & Electrical\,\Safety Management\]} String. ПОСЛЕ parseJson это выглядит так: BusinessUnitName [Проектирование и строительство (технический),Архитектурный дизайн,ИКТ,Механика и электрика,Управление безопасностью] Объект, (массив). В результате выходные данные отображаются как {{ for BusinessUnitName }} • [object Object] {{/for }} - person arame3333; 19.09.2012
comment
@arame3333, пожалуйста, поставьте точку останова на этой строке $('#departmentList').empty(); и покажите скриншоты параметра data (с parseJson и без него). Это что-то простое, но трудно понять дистанционно. - person webdeveloper; 19.09.2012
comment
давайте продолжим это обсуждение в чате - person webdeveloper; 19.09.2012
comment
Я бы хотел, но политика блокировки моих компаний не позволяет этого. - person arame3333; 19.09.2012
comment
Из чата: в консоли вы видите тот же объект, что и в первом примере jsfiddle? если вы замените параметр данных в своей функции данными из консоли, какой результат вы увидите? все работает нормально? - person webdeveloper; 20.09.2012
comment
Еще одно сообщение: я второй раз внимательно проверил ваш пост, как я понимаю, вы получаете массив объектов? 'Object, (Array)' и после рендера у нас есть объект. Вам нужно {field:[]}, а не [{field:[]}]. Пожалуйста, покажите трафик fiddler (после запроса ajax нажмите на запрос и сохраните его в архиве). - person webdeveloper; 20.09.2012
comment
@ arame3333 Нет, на JsFiddle это абсолютно правильный объект, я думаю, что ваш сервер возвращает что-то не так, и мы теряем здесь форматирование. Я тоже не могу посмотреть ваш сайт по ip/домену? Сравните два объекта после jsonParse, они не могут быть равными. - person webdeveloper; 20.09.2012
comment
Я удалил свой последний комментарий, когда я перечитал ваш совет. Я скопировал код из JsFiddle и использовал данные оттуда в своем приложении. Однако я получил такой же недопустимый рендеринг, как и раньше. - person arame3333; 20.09.2012
comment
@arame3333 Не могу поверить) Теперь мы знали, что это не проблема сервера. Если ставить все как в JsFiddle, должно работать, может у вас какая-то старая версия JsRender? Попробуйте сравнить все. - person webdeveloper; 20.09.2012
comment
После jsonParse мои данные выглядят как BusinessUnitName [Архитектурный дизайн, ИКТ, механика и электротехника, управление безопасностью, маркетинг, оценка, развитие персонала и обучения] объект, (массив) - person arame3333; 20.09.2012
comment
@arame3333 arame3333 Хорошо, сложно понять визуализацию текста, но, как я вижу, вы получаете массив объектов. Попробуйте render($.jsonParse(data)[0]). Это просто для теста, это не решение. - person webdeveloper; 20.09.2012
comment
Хорошо, я попробовал это. Я получаю {{ for BusinessUnitName }} • {{/for }} - person arame3333; 20.09.2012
comment
Когда я пробую это без синтаксического анализа, я получаю {{ for BusinessUnitName }} •{ {{/for }} - person arame3333; 20.09.2012
comment
@ arame3333 arame3333 не могли бы вы прислать мне отрендеренный html-murkup? - person webdeveloper; 20.09.2012
comment
вставить вопрос. Пришлось отредактировать, иначе не влезет. - person arame3333; 20.09.2012
comment
@ arame3333 Хорошо, потому что так и должно быть. :-) - person George Stocker; 20.09.2012
comment
@arame3333 arame3333 Работа выполнена;) Я удаляю 3 пробела из шаблона в цикле for. jsfiddle.net/PTWnq/8/ Вот нерабочий пример: jsfiddle.net/PTWnq/9/ (просто сравните их) - person webdeveloper; 20.09.2012
comment
Гений! Должен признаться, вы посоветовали мне это сделать, и я так и думал. Что ж, это один урок, который я не забуду! Благодарю вас! - person arame3333; 20.09.2012
comment
@arame3333 Вовсе нет, хорошего дня) - person webdeveloper; 20.09.2012