Question

我试图在这个jsfiddle中使用使用reactivejs的嵌套模板： 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>

但我无法使嵌套模板起作用，只处理第一级模板。

在jsfiddle中我们可以看到，如果“template-input”处于第一级，所以它被处理，如果它在另一个模板（“template-row”）下，则不处理

我在这里看到了同样的问题： ractivejs component nesting 但我没有成功地回答工作。

有人可以帮我这个吗？

非常感谢！

迦底

Answer 1

您是否尝试将isolated:false添加到组件

例如：

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

此处有Js fiddle

Answer 2

这是因为templateRow组件不了解template-input组件。

为了做到这一点，要么全局定义template-input：

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

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

或内部：

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

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

如果您不确定自己在做什么，我强烈反对使用isolated:false，因为这可能会导致不必要的副作用。

无法处理反应性js嵌套模板

2 个答案: