CODEWITHSUNDEEP
javascriptjqueryhtmlaurelia
TomSelleck
TomSelleck

Reputation: 6968

Dynamically creating a class to use in modal

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:

image of modal dialog

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?

Upvotes: 16

Views: 1053

Answers (2)

DaniCE
DaniCE

Reputation: 2421

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:

Upvotes: 6

ProgrammerV5
ProgrammerV5

Reputation: 1962

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.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties in case it helps.

Upvotes: 1

Related Questions