我对这个框架完全陌生。浏览所有文档我已经使用visual studio和类型脚本成功配置了Aurelia框架。 我想知道如何在另一个视图中组合一个视图,并从其父视图中初始化它的视图模型。
例如: 在导航框架中,我们有一个视图作为欢迎显示名字,第二个名字带有提交按钮。 现在我在其中创建了一个Route名称作为MyApp,我想组成欢迎视图,我想将名字和第二个名称传递给它的视图模型。
请告诉我怎么做? 这就是我的Html MyApp的样子:
<template>
<import from='welcome'></import>
<section class="au-animate">
<compose view-model="welcome"></compose>
</section>
</template>
这是视图模型的方式:
import {inject} from 'aurelia-framework';
import refWelcome = require("welcome");
@inject(refWelcome)
export class myApp {
vm;
title: string;
constructor(refWelcome) {
this.title = "My App Demo";
this.vm = refWelcome;
console.log(this.vm);
}
}
这是欢迎视图的视图模型:
import {computedFrom} from 'aurelia-framework';
export class Welcome{
heading = 'Welcome to the Aurelia Navigation App!';
firstName = 'John';
lastName = 'Doe';
previousValue = this.fullName;
constructor(fname: string, lname: string) {
if (fname != null || lname != null) {
this.firstName = fname;
this.lastName = lname;
}
}
}
答案 0 :(得分:4)
我认为您的代码中存在一些问题 -
require
要撰写视图,您可以使用两种方法 -
撰写自定义元素(不需要)
<template>
<section class="au-animate">
<compose view-model="./welcome"></compose>
</section>
</template>
不知道为什么没有反引号就不会显示
作为自定义元素
<template>
<require from='welcome'></require>
<section class="au-animate">
<welcome></welcome>
</section>
</template>