Aurelia撰写ViewModel-less

Question

试图让Aurelia让ViewModel更少工作并遇到一些问题。

我的项目遇到问题所以要测试我克隆了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＆{39 }}？

我问Aurelia的Gitter频道，但没有得到回复，我不想提出模板资源的问题，以防万一愚蠢我＆＃ 39;这样做以为我先问这里。

Answer 1

看起来你几乎就在那里。只需进行几次调整，这应该可行。在Aurelia中添加动态组合视图所需的步骤如下：

创建动态视图

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

<强>的test.html

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

将视图撰写到您的父组件

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

执行此操作后，您的视图应包含仅在HTML中自定义的自定义元素，如此screengrab所示。