javascript - Creando dinámicamente una clase para usar en modal.

jquery html

Question

Tengo el siguiente código que funciona para mostrar un modal:

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();
}

person-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> 

person-information.js

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

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

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

Este código funciona bien para mostrar lo siguiente:

Estoy teniendo problemas para descubrir cómo puedo inyectar mis propios datos para crear dinámicamente una "Persona".

Pseudocódigo

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();
}

¿Alguien ha tenido alguna experiencia haciendo esto?

Answer 1

Cambie sus propiedades (nombre y apellido) para poder escribir. escribible: verdadero. Algo como esto:

firstName: {
    value: "Tom",
    writable: true
}

lastName: {
    value: "Hanks",
    writable: true   
}

Más información en: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties en caso de que ayude.

Answer 2

Primero, el error se debe a que la propiedad contentModal es simple, la cadena ''persona-información'', por lo que no tiene ninguna propiedad definida.

Pero también hay un problema de concepto en su código: está utilizando content.bind para asignar contenido dinámicamente a su elemento modal, por lo que su clase app.js no conoce el contenido y no debe intentar asignar valores de propiedad de contenido en su clase app.js

Para retener la generalidad se podría hacer algo como (no probado)

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

y llámalo con

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

Luego en person-information.js do

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

Actualizar:

Esta solución actualmente no funciona:

• plunker reproduciendo esta situación
• problema propuesto