递归组件包含

Question

我正在查看 Rich-Harris 关于 github 的 Authoring Ractive.js components 文档。

首先调用 foo 组件并以这种方式包含它：

<link rel='ractive' href='foo.html' name='foo'>
<p>This is an imported 'foo' component: <foo/></p>

我的理解是将 foo.html 声明为组件并在 foo 标记上调用它，这不需要执行 ractive.load （尽管我还不明白数据加载的位置发生）。

因为它根本不起作用（没有加载组件），我想知道我是否误解了这部分。

有没有人用过这个并能给我一个完整的例子？

Answer 1

组件本身独立于加载机制。

在最简单的形式中，组件可以声明在javascript:

Ractive.components.foo = Ractive.extend({
    template: '#foo' // id of script tag, or can be inline string,
    // other options
});

var ractive = new Ractive({
    template: '<p>This is an main view with a 'foo' component: <foo/></p>'
});

创建组件在文档中进行了介绍here。

打包加载组件的方式有很多种。在您的示例中，使用 link 标记需要使用 ractive-load 来实际加载组件：

<!-- name is optional if same as file name -->
<link rel='ractive' href='foo.html' name='foo'> 

<script src='ractive.js'></script>
<script src='ractive-load.js'></script>

<script>

// calling load() with no parameters loads all link tags and 
// registers them as global components
Ractive.load().then( function () {

  var ractive = new Ractive({
    el: 'body',
    template: 'I have access to the <foo/> component!',
    data: { ... }
  });

  // or you could instantiate a component via:
  var app = new Ractive.components.app({
      ... /options
  });
}).catch( handleError );

</script>

递归组件包含

Recursive component inclusion

ractivejs