reactive js nested templates not handled

Question

I am trying to use nested templates using reactivejs in this jsfiddle: https://jsfiddle.net/2hLzhwyd/3/

 <script id="templateMain" type="text/ractive">   
<div>Inputs:</div>
<div>
    {{#inputs:index}}
  <div>
  <div>Input Number {{index}}:</div>
    <template-input input={{.}} />
  </div>
  {{/inputs}}
  </div>
  <div>Rows:</div>
<div>
  {{#rows:index}}
  <div>
  <div>RowNumber {{index}}:</div>
  <template-row row={{.}} >
  </div>
  {{/rows}}
  </div>

</script>

But I can't make the nested template to work, only the first level template is handled.

In the jsfiddle We can see that if the "template-input" is at the first level so it is handled, and if it under another template ("template-row") it is not handled

I saw the same question here: ractivejs component nesting but I didn't succeed make the answer to work.

Can someone help me with this?

Thank you very much!

Gadi

Answer 1

Have you tried adding isolated:false to the component

Eg:

var templateInput = Ractive.extend({ isolated:false, template: '#templateInput' }); var templateRow = Ractive.extend({ isolated:false, template: '#templateRow' });

Herewith a Js fiddle

Answer 2

It's because the templateRow component does not know about the template-input component.

In order to do so, either define template-input globally:

Ractive.components['template-input'] = Ractive.extend(...)

https://jsfiddle.net/2hLzhwyd/15/

Or internally:

var templateRow = Ractive.extend({ template: '#templateRow',
     components: {
         'template-input': templateInput
     }
 })

https://jsfiddle.net/2hLzhwyd/13/

I strongly advise against using isolated:false if you are unsure what you are doing as it may lead to unwanted side effects.