Aurelia 撰写 ViewModel-less

Question

试图让 Aurelia 组合 ViewModel-less 工作并遇到一些问题。

我的项目有问题，所以为了测试我克隆了skeleton-typescript 项目。 我在 src 目录中创建了一个 test.html 页面，其中包含以下内容<template><div>Hi I'm a test message</div></template>。 然后，在welcome.html 页面中，我在提交按钮之前添加了以下内容 <template><compose view="./test.html"></compose></template>.

它不会显示我是否做错了什么（根据文档，这就是它的完成方式）还是 aurelia 的 templating-resources 有问题？

我在 Aurelia 的 Gitter 频道上问过，但没有得到回复，我不想就模板资源提出问题，以防万一我这样做很愚蠢，所以我想先在这里问一下。

Answer 1

看起来你快到了。只需进行一些调整，这应该可以工作。在 Aurelia 中添加动态组合视图所需的步骤如下：

创建动态视图

创建 HTML 模板。在这种情况下，您需要创建 test.html 模板，如下面的 sn-p 所示。

test.html

<template> <div>Hi I'm a test message</div> </template>

将视图组合到您的父组件中

创建视图后，您需要使用 Aurelia 框架提供的 <compose> 自定义元素将其组合到父组件中。在您的情况下，您需要对 <welcome> 视图模板进行以下更改：

<template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName" class="form-control" 
            id="fn" placeholder="first name">
      </div>
      <div class="form-group">
        <label for="ln">Last Name</label>
        <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
      </div>
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      </div>
      <compose view="./test.html"></compose>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>

完成此操作后，您的视图应包含仅在 HTML 中组成的新自定义元素，如此屏幕截图所示。