javascript - Creando dinámicamente una clase para usar en modal.
jquery html (2)
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.
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?
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: