Aurelia撰写ViewModel-less
问题描述:
试图让Aurelia撰写ViewModel-less工作和有一些问题。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频道,但没有得到答复,我不想提出与模板资源的问题,以防万一它是愚蠢的我这样做,我想我会先问这里。
答
它看起来像你几乎在那里。只需调整一下,这应该起作用。是在奥里利亚添加动态组成视图所需的步骤如下:
创建动态视图
创建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。
肖恩,你是一个明星伴侣。我知道我在做一些愚蠢的事情,但看不到它!谢谢你的帮助。 –
没问题,'compose'在我第一次使用它的时候抓住了我:D –