определить переменную внутри шаблона jsrender

Мне нужно сохранить переменную «colcounter» внутри цикла, которая будет использоваться для заполнения шаблона jsrender.

Вот мой код шаблона

  <script id="datascapeTemplate" type="text/x-jsrender">

<div id="dsViewport">

    <div class="ds-column" style="width:{{:(name.length*100)}}px;">
        <h1 id="datascapeName">{{:name}}</h1>
        <div><span id="dsToggle">toggle</span></div>
    </div>
{{=colcounter}}
    {{for sections}}
    <div class="ds-section">

        <h3>{{:label}}</h3>
        <div class="ds-column" id="start">

        {{for items}}

            {{* if (colcounter > 4){ 
                colcounter = 1;
                }} 
        </div>
        <div class="ds-column" id="start">

            {{* } }}

            {{* 
            if ( data.selected || datascape.showInvisible) {  }}     
            <div class="ds-item {{* if (data.featured){ }} nowActive {{*} }} {{* if (data.active){ }} nowActiveRed {{*} }}"  background="{{:background}}" bgcolor="#000000" fgcolor="#FFFFFF">
                <div class="ds-item-container">
                    <h4>{{:title}}<br/>{{:time}}</h4>

                    <p><a item="{{:id}}" href="{{:url}}" class="itemLink">view file {{:colcounter}}</a></p>
                </div>
            </div>

            {{* colcounter++; }}

            {{* } }}

        {{/for}}
        </div>
        {{* colcounter=1; }}
        </div>
    {{/for}}
    {{* colcounter=1; }}
</div>


</script>

К сожалению, он печатает на самой первой итерации цикла «Ошибка: colcounter не определен». Дальше работает.

Кажется, способ, которым я инициализирую свою переменную colcounter, не работает, но я не могу найти правильный способ. var colcounter =0 не работает.

ОБНОВЛЕНИЕ

  • jsfiddle: http://jsfiddle.net/ZX6Mk/
  • colcounter работает сейчас. Я объявил это в глобальной области видимости. Но у меня проблема с datascape.showInvisible. Это также вызывает ошибку Error: Cannot read property 'showInvisible' of undefined.

Спасибо за уделенное время, а.


javascript jquery jsrender
person pixeline    schedule 04.04.2012    source источник
comment
Можете ли вы создать скрипт на jsfiddle.net с вашим примером, включая ваш javascript, пожалуйста? Ваш HTML и шаблон предполагают несколько проблем. Во-первых, {{=colcounter}}, скорее всего, должно быть {{:colcounter}}, если вы собираетесь отображать это значение. Отображение значения в jsrender выполняется с помощью такого токена {{:myVal}} . Во-вторых, не очевидно, является ли colcounter частью контекста данных для шаблона, переменной javascript, определенной вне шаблона (которая не будет работать, если вы не передадите ее как данные), или переменной, которую вы хотите определить внутри шаблона. Только.   -  person John Papa    schedule 06.04.2012
comment
Я предполагаю, что colcounter — это переменная, которую вы хотите создать и использовать только в шаблоне. Прежде чем мы перейдем к этому, я настоятельно рекомендую вам изменить шаблон, чтобы он не использовал allowCode, а вместо этого использовал некоторые вспомогательные функции. Операторы if можно легко написать для использования помощников. Но покажите нам полный пример в jsfiddle, и я смогу помочь вам больше.   -  person John Papa    schedule 06.04.2012
comment
Здравствуйте, спасибо за комментарии. Вот скрипт: jsfiddle.net/ZX6Mk   -  person pixeline    schedule 07.04.2012
comment
спасибо, я опубликую ответ в ближайшее время.   -  person John Papa    schedule 08.04.2012

Ответы (1)


arrow_upward
3
arrow_downward

Я взял твою скрипку и сделал несколько изменений. http://jsfiddle.net/johnpapa/bLSkz/

  1. На toggleButton ссылались в jQuery без #. Поэтому я добавил этот элемент списка, иначе щелчок не регистрировался.
  2. Ваша скрипка не ссылалась ни на jQuery, ни на JsRender, хотя вы использовали оба, поэтому я добавил их. (Я предполагаю, что вы никогда не играли на скрипке)
  3. Свойства datascape.showInvisible не было, поэтому я его создал.

  4. Я передал showInvisible во внутренний цикл for с помощью параметра, чтобы к нему можно было получить доступ в его контексте.

    {{for sections ~showIt=showInvisible}}

{{if (editorspick_amount > 0 || ~showIt)}}

  5. Шаблон, который вы пытались визуализировать, не существовал, поэтому я изменил код рендеринга, чтобы использовать созданный вами тег скрипта. При этом также устанавливается параметр allowCode=true, необходимый для безопасного включения функции allowCode.

    $.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true });

$('#toggleButton').click(function(){
    if(!rendered){
        rendered = true;
        $("#datascape").html(
            $.render.myTmpl( datascape.json )
        ).show();
    }
});

  6. Я изменил одно место, где вы использовали {{* }}, чтобы вместо этого использовать блок {{if}}, поскольку не было необходимости использовать разрешающий код.

Это позволило запустить весь код и отобразить шаблон, хотя я, по общему признанию, не следил за всем, что вы пытались сделать.

Надеюсь это поможет.

Одно предложение... функция allowCode создает действительно уродливые шаблоны, которые трудно поддерживать и читать. Я настоятельно рекомендую заменить его вспомогательными функциями (или другими конструкциями). Например, вы использовали allowCode для создания стиля некоторых элементов. Вместо этого вы могли бы использовать собственный тег, переместить логику в javascript и упростить свой шаблон. colcounter может быть перемещен во вспомогательную функцию. Гораздо читабельнее переместить логику в javascript и сохранить шаблон/html в чистоте. Просто мои 2 цента :)

person John Papa    schedule 08.04.2012
comment
Привет, Джон, я опубликовал новый шаблон здесь: jsfiddle.net/7JGLm Но у меня есть другой проблема: он работает для некоторых файлов json, а не для других, поэтому он немного ненадежен. Я обновлю скрипку, чтобы проиллюстрировать это. - person pixeline; 15.04.2012
comment
Нет, на самом деле я думаю, что моя проблема связана с css, jsfiddle работает нормально. Вы увидите, что я использовал помощников, как вы советовали. - person pixeline; 15.04.2012