0
votes

At props loop level, I have to sets of data: set_of_data_1 and set_of_data_2. I want to loop set_of_data_1, for each iteration include another template, and in that included template loop set_of_data_2.

//TemplateA
{{props object.value}}
    <span>{{:key}}</span>
    <div>
    {{for prop.set_of_data_1 ~set_of_data_2=prop.set_of_data_2}}
        {{include tmpl="TemplateB"/}}
    {{/for}}
    </div>
{{/props}}


//TemplateB
{{for ~set_of_data_2}}
    // <- here I want to loop trough set_of_data_2,
    // but it seems that #index (actually #getIndex())
    // is resolving the #index of the for loop from TemplateA (prop.set_of_data_1)
    // and #data is resolving the indexes of ~set_of_data_2
{{/for}}

So how can I print the #index and #data (#data.some_key) of ~set_of_data_2 in TemplateB?

UPDATE: Sorry for my mistake and wasting your time Boris. Now I'm having another issue (same example as above, but slightly different):

//TemplateA
{{props object.value}}
    <span>{{:key}}</span>
    <div>
    {{for prop.set_of_data_1 ~prop=prop}}
        {{include tmpl="TemplateB"/}}
    {{/for}}
    </div>
{{/props}}


//TemplateB
{{for ~prop.set_of_data_2}}
    // This is working...
    <span>{{:#parent.parent.data[#data.some_key]}}</span> //Accesing set_of_data_1

    // But this doesn't...
    {{if some_condition}}
    <span>{{:#parent.parent.data[#data.some_key]}}</span> //Accesing set_of_data_1 inside IF (and I'm getting inside IF)
    {{/if}}
{{/for}}
1

1 Answers

1
votes

It seems to work correctly to me:

<script type="text/x-jsrender" id="tmplA">
  {{props object.value}}
    <span>{{:key}}</span>
    <div>
    {{for prop.set1 ~set2=prop.set2}}
      <div><br/>
        One{{:val}}<br/> {{include tmpl="#tmplB"/}}
      </div>
    {{/for}}
    </div>
  {{/props}}
</script>

<script type="text/x-jsrender" id="tmplB">
  One{{:val}}
  {{for ~set2}}
    <div>
      Two{{:val}} TwoIndex{{:#index}}
    </div>
  {{/for}}
</script>

<div id="result"></div>

<script>
  var app = {
    object: {
      value: {
        foo: {
          set1: [{val: "aaa"}, {val: "bbb"}],
          set2: [{val: "AAA"}, {val: "BBB"}]
        }
      }
    }
  };

  var tmpl = $.templates("#tmplA");

  $("#result").html(tmpl.render(app));
</script>

Result:

foo 

Oneaaa
Oneaaa 
TwoAAA TwoIndex0 
TwoBBB TwoIndex1 


Onebbb
Onebbb 
TwoAAA TwoIndex0 
TwoBBB TwoIndex1 

Is there some problem with this?