Aurelia - 撰写视图答案

【问题标题】：Aurelia - compose viewAurelia - 撰写视图
【发布时间】：2017-02-04 05:28:39
【问题描述】：

我对这个框架完全陌生。浏览所有文档，我已经使用 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;
      }
  }
}

【问题讨论】：

标签： aurelia

【解决方案1】：

我认为您的代码中存在一些问题 -

您需要修复 myApp 的 title 属性的语法。
按照惯例，您应该将类命名为 PascalCase。
您目前无法使用标准 HTML 导入，如果您需要自定义元素，则需要使用 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>

【讨论】：