2015-07-11 9 views
0

Я мигрируют из шаблонов JQuery в JsRender, и я не знаю, как полностью перевести {{each}} в {{for}}пользовательские переменные в ФОР с JsRender

с шаблонами JQuery я мог бы сделать что-то вроде этого:

{{each (i, val) object.items}} 
    <span data-index="${i}">${val}</span> 
{{/each}} 

Где object.items массив значений, и я мог бы определить пользовательские index и item переменных для отображения данных (в данном случае i и val). Но как я могу сделать то же самое в JsRender?

{{for object.items}} 
    <span data-index="{{:#index}}">{{:#data}}</span> 
{{/for}} 

Я знаю index и data там, чтобы показать то же самое, как шаблоны JQuery, но как я могу определить пользовательские переменные? Возможно ли это?

ОБНОВЛЕНИЕ: Причина этого заключается в предоставлении некоторого контекста для переменной, с которой я работаю. Поясню и пример (JQuery TMPL)

{{each (r, row) object.rows}} 
    {{each (c, col) object.cols}} 
     //work with both index and item knowing which one is which 
    {{/each}} 
{{/each}} 

Является ли этот вид синтаксиса/логики можно с двигателем?

ответ

0

Вы можете создать пользовательскую переменную для элемента данных (эквивалент val в JQuery шаблоны версии), следующим образом:

{{for object.items itemVar='~val'}} 
    <span>{{:~val}}</span> 
{{/for}} 

Там в настоящее время нет функция для пользовательского имени index переменной. (Можно было бы добавить поддержку с использованием синтаксиса {{for object.items itemVar='~val' indexVar='~i'}} - но это не реализовано в настоящее время).

Но если ваша причина для желания, чтобы обеспечить пользовательскую переменную для #index это для того, чтобы сделать его доступным для вложенных блоков областей, можно определить пользовательскую переменную для #index на вложенный тег следующим образом:

{{for object.items itemVar='~val'}} 
    {{someNestedTag ~i=#index}} 
     <span data-index="{{:~i}}">{{:~val}}</span> 
    {{/someNestedTag}} 
{{/for}} 

Теперь взять конкретный случай:

{{each (r, row) object.rows}} 
    {{each (c, col) object.cols}} 
     //work with both index and item knowing which one is which 
    {{/each}} 
{{/each}} 

Вот один из способов сделать это в JsRender/JsViews:

{{for grid.rows ~grid=grid}} 
    {{for ~grid.cols ~rowIndex=#index ~row=#data}} 
    Row {{:~rowIndex}} {{:~row.rowProp}} 
    Col: {{:#index}} {{:colProp}} 
    {{/for}} 
{{/for}} 

Если вы хотите использовать данные сшивание, с JsViews, вы бы вместо того, чтобы писать выше:

{^{for grid.rows ~grid=grid}} 
    {^{for ~grid.cols ^~rowIndex=#index ~row=#data}} 
    Row {^{:~rowIndex}} {^{:~row.rowProp}} 
    Col: {^{:#index}} {^{:colProp}} 
    {{/for}} 
{{/for}} 

Обратите внимание, что в версии JsViews, потому что я хочу ~ RowIndex для динамического обновления через привязку данных при предшествующие строки удаляются, я использую синтаксис ^~rowIndex - который является отказом в привязке данных. ~rowIndex будет выглядеть правильно, но не будет обновляться при удалении строк ...

Вы можете увидеть его

и из интереса, смотри также здесь для представлений сетки с использованием пользовательских теги:

Дополнительное примечание: В ответ на комментарий ниже "? Почему бы не продолжать с синтаксисом {{для (индекс, элемент) объект}}"

В JsRender вы можете создавать пользовательские теги очень легко, и все теги имеют общую структуру: http://www.jsviews.com/#tags{{MyTag arg0 arg1 namedProp1 = ххх namedProp2 = ууу}} ... {{/ MyTag}} с использованием имени параметры (реквизиты) и неназванные параметры (args).

Так itemVar = «~ Вал» работает для любого тега даже пользовательские теги (не только {{для ...}}), использует стандартный синтаксис для имени параметра, а также позволяет создать параметр контекстного шаблона (вспомогательный параметр) val, соответствующий элементу данных блока шаблона (или блоков).

Также в JsRender (выражение) синтаксис уже имеет значение как arg. Например, {{for (1 + 2)}} {{:}} {{/ for}} выведет !

В JQuery Шаблоны, нет поддержки пользовательских тегов и (я, Валя) синтаксис специального обсаженных для {{каждый}} тега.

В общих сценариях вам не нужны пользовательские имена переменных и синтаксис JQuery Шаблонов:

{{each (i, val) object.items}} 
    <span data-index="${i}">${val}</span> 
{{/each}} 

(я бы сказал) немного более сложные, чем JsRender один:

{{for object.items}} 
    <span data-index="{{:#index}}">{{:}}</span> 
{{/for}} 
+0

Спасибо, Борис! На стороне примечания, почему бы не продолжить с помощью символа '{{for (index, item)}}'? Я думаю, что писать что-то вроде 'itemVar = '~ val'' не так просто, как с шаблонами jQuery, не говоря уже о предыдущем символе' ~ '. –

+0

Я добавил фон в синтаксис, к моему ответу выше ... – BorisMoore

+0

Я обновил свой ответ, чтобы дать понять, что я после –