动态创建一个在模态中使用的类答案

【问题标题】：Dynamically creating a class to use in modal动态创建一个在模态中使用的类
【发布时间】：2016-03-29 00:34:00
【问题描述】：

我有以下代码可用于显示模式：

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';
}

此代码可以很好地显示以下内容：

我无法弄清楚如何注入自己的数据来动态创建“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();
}

有人有这方面的经验吗？

【问题讨论】：

我在这里没有看到任何不起作用的东西，setModal 没有得到你的正确值还是什么？
@PWKad 在调用 setModal 函数时，我在 js 控制台中得到以下错误：Uncaught TypeError: Cannot set property 'firstName' of undefined 如果我尝试这样做：this.contentModal.person = new Person(); 我得到：Uncaught TypeError: Cannot assign to read only property 'person' of person-information

标签： javascript jquery html aurelia

【解决方案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中做

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

更新：

此解决方案目前不起作用：

【讨论】：

不幸的是抛出了未定义的错误：Uncaught TypeError: Cannot set property 'firstName' of undefined
我会尝试调试 setModal 方法来检查 this.contentModal 和 this.contentModal.person 的内容。
是的 this.contentModal 只是一个引用person-information view-modal 的字符串。更新的setModal 方法只是伪代码，只是为了说明我想要发生的事情。
我尝试了您的更新答案，我怎样才能让created(...) 被调用，它应该自动发生吗？
我已经测试过，同样的情况发生在我身上，created 没有被调用。有一个open issue about this。

【解决方案2】：

将您的属性（名字和姓氏）更改为可写。可写：真实。像这样的：

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

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

【讨论】：