javascript - 当组件位于两个单独的文件中时，如何在 ractive.js 中将组件插入和嵌套在另一个组件中？

Question

我已经学习 ractive.js 几个星期了，我正在尝试在一个更大的网页中构建一个列出三个项目的功能。每个列表都有自己的标题和描述。每个列表都是一个组件(列表组件)，具有自己的样式和 javascript(每个组件都是一个单独的 html)。我还有一个组件(描述组件)，负责写出标题和描述，它位于一个单独的 html 文件中。我遇到的问题是“导入”或将该描述组件引入列表组件，因此主索引 html 文件中的输出是这样的:

<description title="Name">
    <list-items/>
</description>

到目前为止，我研究了yield指令并尝试了一些示例，但这是一个在同一文档上使用两个组件的简单示例。我不确定这是否是正确的方法。这是描述组件 html 文件中的内容:

<p>{{title}}</p>

我尝试使用 ractive-load.js 并为每个列表组件文件加载描述组件 html，如其 github 上的此示例所示:

Ractive.load({
  Foo: 'my-components/foo.html',
  Bar: 'my-components/bar.html'
}).then( function ( components ) {
  var foo = new components.Foo({
    el: 'body',
    data: { ... }
  });

  var bar = new components.Bar({
    el: 'body',
    data: { ... }
  });
}).catch( handleError );

这似乎有点矫枉过正，我认为必须有更好的方法。我将如何解决这个问题？

Answer 1

Ractive 组件的加载与处理嵌套组件以及将生成的内容传递给组件没有直接关系。

Ractive.load其工作原理是获取一个或多个 html 文件，然后将其解析为组件。从您的代码示例来看，您似乎已经使该部分正常工作。对于较大的应用程序，我通常使用构建工具插件来预捆绑所有 Ractive 组件，以便它们可以在一个文件中交付，甚至可以卷入我的主捆绑 js 中。

无论组件如何可用，它们都需要在使用组件(或 View 父级)或全局上注册:

Ractive.load({
  Foo: 'my-components/foo.html',
  Bar: 'my-components/bar.html'
}).then( function ( components ) {
  Ractive.components.foo = components.Foo;
  Ractive.components.bar = components.Bar;

  // now create your actual top-level view instance(s)

}).catch( handleError );

在组件架构中，您可以创建组件树或灌木丛。我通常只有一个顶级 app组件，但创建从 DOM 中不同位置开始的多个树当然是可行的。

为了简单起见，继续上面的示例，让我们创建一个通用的 ractive 实例，它使用我们注册的两个组件 Foo 和 Bar(注意我们使用分配给 Ractive.components 的属性名称):

const ractive = new Ractive({
    el: document.body,
    sayHello() {
        alert('hello from main Ractive instance');
    },
    template: `
        <h1>my kewl app</h1>
        <foo>
            <h3 on-click="sayHello()">hello world</h3>
            <bar bizz="{{buzz}}"></bar>
        </foo>
    `
});

在本例中，我们将一些内容(html 和 bar 组件)传递给 foo 组件，方法是将其包含为 <foo>元素内容。

如何使用此内容取决于 foo模板。有两种选择:

<div>
    <h2>foo component template</h2>
    {{>content}}
    <p>some more stuff</p>
</div>

在此示例中，我们使用内置的部分“内容”来告诉模板将提供的内容放入 {{>content}} 中。投币口。在这种情况下，提供的内容像部分内容一样传递，任何指令都将应用于 foo成分。因此，在此示例中，单击 h3 header 将尝试运行 foo.sayHello() 。当通过bizz时数据发送至bar组件，Ractive 将开始在 foo 中查找buzz的组件.

通常，这不是您想要的。您希望发生的事情是让 parent 拥有这些指令。所以改为 foo模板看起来像:

<div>
    <h2>foo component template</h2>
    {{yield}}
    <p>some more stuff</p>
</div>

现在当 h3点击后，它会调用主ractive.sayHello()方法，因为内容被传递以由 foo 组件在 DOM 中呈现，但它仍然由传递的实例拥有。同样，Ractive 将开始查找 buzz在主实例中，不是 foo .

与 yield您还可以命名要传递的多个部分:

<!-- "foo" template: -->
<div>
    <header>{{yield header}}</header>
    <section>
        <div>something here</div>
        <div>{{yield message}}</div>
    </section>
</div>

<!-- using "foo": -->
<div>
    <foo>
        {{#partial header}}
            <h2>This is the header to use</h2>
        {{/partial}}
        {{#partial message}}
            <p>This is the message to use, with a bar component to boot</p>
            <bar></bar>
        {{/partial}}
    </foo>
</div>