Question

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

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

此代码适用于显示以下内容：

我无法弄清楚如何注入自己的数据来动态创建“人物”。

伪代码：

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

有没有人有这方面的经验？

Answer 1

首先，错误是因为 contentModal 属性很简单，字符串＆＃39; person-information＆＃39;所以它没有定义任何人的财产。

但是代码中也存在概念问题：您正在使用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'];
   ....
}

<强>更新

此解决方案目前无效：

Answer 2

将您的属性（firstName和lastName）更改为可写。可写的：真的。像这样：

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

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

更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties以防万一。

动态创建要在模态中使用的类

2 个答案: