部分內部的組件

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/