Aurelia 编写无 ViewModel

Question

正在尝试让 Aurelia compose 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 模板，如下面的代码片段所示。

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 中新组成的自定义元素，如屏幕抓图所示。

Aurelia 编写无 ViewModel

Aurelia compose ViewModel-less

aurelia-templating