partials 中的组件

Question

Ractive Components 如何存在于 partials 中？

我有一个 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/

partials 中的组件

Components inside partials

ractivejs