Аурелия - составной вид

Я совершенно новичок в этой структуре. Пройдя через все документы, я успешно настроил фреймворк Aurelia, используя визуальную студию и скрипт типа. Я хочу знать, как составить представление внутри другого представления и инициализировать его модель представления от родителя.

Например: здесь в скелете навигации у нас есть одно представление приветствия, отображающее имя и фамилию с кнопкой отправки. Теперь я создал одно имя маршрута как 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
person Pranay Verma    schedule 08.10.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я думаю, у вас есть несколько проблем в вашем коде -

  1. Вам нужно исправить синтаксис для свойства title вашего приложения myApp.
  2. Обычно вы должны называть свои классы PascalCase.
  3. В настоящее время вы не можете использовать стандартный импорт HTML, вам нужно использовать require, если вам требуется пользовательский элемент

Чтобы составить представление, вы можете использовать два метода:

  1. Создать пользовательский элемент (требовать не обязательно)

     <template>
     <section class="au-animate">       
       <compose view-model="./welcome"></compose>
     </section>
 </template>

Не знаю, почему это не будет отображаться без обратных кавычек

  1. Как пользовательский элемент

    <template>
    <require from='welcome'></require>
    <section class="au-animate">       
      <welcome></welcome>
    </section>
</template>
person PW Kad    schedule 08.10.2015