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。

有许多方法可以打包和加载组件。使用链接标记（如示例所示）需要使用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>

递归组件包含

1 个答案: