部分内部的组件

Question

Ractive组件如何在部分内部生存？

我有一个FormInput元器件

<FormInput type="text" label="Please enter name" value="{{John Doe}}"/> 

其转换为

<div> 
    {{label}}: <input type="{{type}}" value="{{value}}"> 
</div> 

还有另一个组件Modal

<div> 
    {{>modalContents}} 
</div> 

当我创建一个Modal组分与

modalContents:'<FormInput type="text" label="Please enter name" value="{{John Doe}}"/>'

该组件根本没有渲染，可能是因为ractive认为它只是文本。我知道，我在这里失去了一些东西......有没有办法让它实际解析组件？

*注意：例如，简化

Answer 1

这并不工作，但你必须确保该FormInput成分是注册。一种方式是在全球范围内注册它...

Ractive.components.FormInput = FormInput; 

...但创建一个新的实例时，你也可以注册它：

var FormInput = Ractive.extend({ 
    template: '<div>{{label}}: <input type="{{type}}" value="{{value}}"></div>' 
}); 

var Modal = Ractive.extend({ 
    template: '<div>{{>modalContents}}</div>' 
}); 

var modal = new Modal({ 
    el: 'body', 
    partials: { 
    modalContents: '<FormInput type="text" label="Please enter name" value="John Doe"/>' 
    }, 

    // register the component here 
    components: { FormInput: FormInput } 
}); 

。在你的例子小的语法错误而相关 - 它应该是John Doe，而不是{{John Doe}}。

这里演示：http://jsfiddle.net/rich_harris/80w8o1bu/