javascript - Dynamically creating a class to use in modal - Stack Overflow

admin管理员组

文章数量:1394055

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

Share Improve this question Follow asked Dec 22, 2015 at 17:08 TomSelleckTomSelleck 6,9682323 gold badges9090 silver badges161161 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6 +50

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.

本文标签： javascriptDynamically creating a class to use in modalStack Overflow