Question

Ractive Components如何在partials中生活？

我有一个<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}}"/>'组件时

function cb(arg){ alert("I'm "+arg+"!") } function total(arg, callback){ setTimeout(callback, 1000, arg); } total('one', cb);

组件根本没有渲染，可能是因为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/

部分内部的组件

1 个答案: