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>