Динамическое создание класса для использования в модальных

У меня есть следующий код, который работает для отображения модальности:

app.html

  

<a click.delegate="setModal('person-information')">Test</a>

<modal>
    <modal-header title.bind="'View Person'"></modal-header>
    <modal-body content.bind="contentModal"></modal-body>
    <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>

app.js

setModal(modal) {
    this.contentModal = modal;
    $('.modal').modal();
}

человек-information.html

<template>
    <form role="form">
        <div class="form-group">
            <label for="fn">First Name</label>
            <input type="text" value.bind="person.firstName" class="form-control" id="fn" placeholder="first name">
        </div>
        <div class="form-group">
            <label for="ln">Last Name</label>
            <input type="text" value.bind="person.lastName" class="form-control" id="ln" placeholder="last name">
        </div>
    </form>
</template> 

человеко-information.js

import {bindable, inject} from 'aurelia-framework';

@inject(Element)
export class PersonInformation {  
    constructor() {
        this.person = new Person();
    }
}

class Person{  
    firstName = 'Patrick';
    lastName = 'Bateman';
}

Этот код отлично подходит для отображения следующего:

образ модального диалога

У меня возникли проблемы с выяснением того, как я могу вводить свои собственные данные для динамического создания "Person".

псевдокод:

app.html

    <a click.delegate="setModal('person-information', 'Tom', 'Hanks')">Test</a>

app.js

setModal(modal, firstname, lastname) {
    this.contentModal = modal;

    this.contentModal.Person.firstName = firstname;
    this.contentModal.Person.lastName = lastname;

    $('.modal').modal();
}

У кого-нибудь есть опыт?

Ответы

Ответ 1

Во-первых, ошибка возникает из-за того, что свойство contentModal является простой строкой 'person-information', поэтому она не определила какое-либо свойство person.

Но также есть проблема концепции в вашем коде: Вы используете content.bind для назначения динамического контента вашему модальному элементу, поэтому ваш класс app.js не знает о содержимом, и вы не должны пытаться назначать значения свойств контента в своем классе app.js.

Чтобы сохранить общность, вы можете сделать что-то вроде (не проверено)

setModal(modal, props) {
    this.contentModal = modal;
    this.modalProps = props; 
    ...
}

и назовите его

<a click.delegate="setModal('person-information', { firstName: 'Tom', secondName: 'Hanks' })">Test</a>

Затем в person-information.js do

bind(bindingContext) {        
   this.person.firstName = bindingContext.modalProps['firstName'];
   ....
}

Update:

В настоящее время это решение не работает: