Динамическое создание класса для использования в модальных
У меня есть следующий код, который работает для отображения модальности:
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:
В настоящее время это решение не работает:
Ответ 2
Измените свойства (firstName и lastName) для записи. доступный для записи: true. Что-то вроде этого:
firstName: {
value: "Tom",
writable: true
}
lastName: {
value: "Hanks",
writable: true
}
Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties в случае, если это поможет.