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

它看起来像你几乎在那里。只需调整一下，这应该起作用。是在奥里利亚添加动态组成视图所需的步骤如下：

创建动态视图

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

的test.html

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

撰写视图到您的父组件

你所创建的视图后，您需要使用它撰写成父组件<compose>由Aurelia框架提供的自定义元素。在你的情况，你需要做下面的改动你的<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只自定义元素的新的组成如图所示在这个screengrab。