Aurelia - 撰写视图

时间:2015-10-08 13:05:21

标签: aurelia aurelia-router

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

1 个答案:

答案 0 :(得分:4)

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

  1. 您需要修复myApp标题属性的语法。
  2. 按照惯例,您应该将您的类命名为PascalCase。
  3. 目前您无法使用标准HTML导入,如果您需要自定义元素,则需要使用require
  4. 要撰写视图,您可以使用两种方法 -

    1. 撰写自定义元素(不需要)

       <template>
           <section class="au-animate">       
             <compose view-model="./welcome"></compose>
           </section>
       </template>
      
    2. 不知道为什么没有反引号就不会显示

      1. 作为自定义元素

        <template>
            <require from='welcome'></require>
            <section class="au-animate">       
              <welcome></welcome>
            </section>
        </template>