I have the following code which works for displaying a 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';
}

This code works fine for displaying the following:

I'm having trouble figuring out how I can inject my own data to dynamically create a "Person".

Pseudocode:

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

Has anybody had any experience doing this?

I have the following code which works for displaying a 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';
}

This code works fine for displaying the following:

I'm having trouble figuring out how I can inject my own data to dynamically create a "Person".

Pseudocode:

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

Has anybody had any experience doing this?

• javascript
• jquery
• html
• aurelia

• I don't see anything here that wouldn't work, does setModal not get your proper values or what? – PW Kad Commented Dec 24, 2015 at 6:40
• @PWKad When calling the setModal function, I get the following errors in the js console: Uncaught TypeError: Cannot set property 'firstName' of undefined And if I try to do: this.contentModal.person = new Person(); I get: Uncaught TypeError: Cannot assign to read only property 'person' of person-information – TomSelleck Commented Jan 4, 2016 at 12:36

2 Answers 2

First, the error is because the contentModal property is simple the string 'person-information' so it does not have defined any person property.

But also there is a problem of concept in your code: You are using content.bind to assign dynamically content to your modal element, so your app.js class do not know about the content and you should not try to assign content property values in your app.js class.

To retain generality you could do something like (not tested)

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

and call it with

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

Then in person-information.js do

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

Update:

This solution currently does not work:

• plunker reproducing this situation
• proposed issue

Change your properties (firstName and lastName) to be writable. writable: true. Something like this:

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

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

More info at: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties in case it helps.