Aurelia - 撰写视图

Question

我对这个框架完全陌生。浏览所有Docs，我已经使用visual studio和type script成功配置了Aurelia框架。 我想知道如何在另一个视图中编写一个视图，并从其父视图模型初始化它。

例如： 在导航框架中，我们有一个视图作为欢迎使用提交按钮显示名和姓。 现在我创建了一个名为MyApp的Route名称，我想创建一个欢迎视图，并且我想将名字和第二个名字传递给它的视图模型。

请让我知道该怎么做？ 这是我的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; 
     } 
    } 
} 

Answer 1

我想你代码中的几个问题 -

1. 您需要修复myApp标题属性的语法。
2. 传统上你应该命名你的类PascalCase。
3. 你不能在此刻使用标准的HTML导入，您需要使用require如果你需要自定义元素

要撰写的观点，你可以用两种方法 -

1. （要求不要求）

   撰写自定义元素

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