title: Dynamically creating a class to use in modal
body: <p>I have the following code which works for displaying a modal:</p>
  
  <p>app.html</p>
  
  <p>
      </p>
  
  <pre><code>&lt;a click.delegate="setModal('person-information')"&gt;Test&lt;/a&gt;
  
  &lt;modal&gt;
      &lt;modal-header title.bind="'View Person'"&gt;&lt;/modal-header&gt;
      &lt;modal-body content.bind="contentModal"&gt;&lt;/modal-body&gt;
      &lt;modal-footer buttons.bind="['Cancel']"&gt;&lt;/modal-footer&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p></p>
  
  <p>app.js</p>
  
  <pre><code>setModal(modal) {
      this.contentModal = modal;
      $('.modal').modal();
  }
  </code></pre>
  
  <p>person-information.html</p>
  
  <pre><code>&lt;template&gt;
      &lt;form role="form"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="fn"&gt;First Name&lt;/label&gt;
              &lt;input type="text" value.bind="person.firstName" class="form-control" id="fn" placeholder="first name"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="ln"&gt;Last Name&lt;/label&gt;
              &lt;input type="text" value.bind="person.lastName" class="form-control" id="ln" placeholder="last name"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt; 
  </code></pre>
  
  <p>person-information.js</p>
  
  <pre><code>import {bindable, inject} from 'aurelia-framework';
  
  @inject(Element)
  export class PersonInformation {  
      constructor() {
          this.person = new Person();
      }
  }
  
  class Person{  
      firstName = 'Patrick';
      lastName = 'Bateman';
  }
  </code></pre>
  
  <p>This code works fine for displaying the following:</p>
  
  <p><a href="https://i.stack.imgur.com/WHPi7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WHPi7.png" alt="image of modal dialog"></a></p>
  
  <p>I'm having trouble figuring out how I can inject my own data to dynamically create a "Person".</p>
  
  <p>Pseudocode:</p>
  
  <p>app.html</p>
  
  <pre><code>    &lt;a click.delegate="setModal('person-information', 'Tom', 'Hanks')"&gt;Test&lt;/a&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>setModal(modal, firstname, lastname) {
      this.contentModal = modal;
  
      this.contentModal.Person.firstName = firstname;
      this.contentModal.Person.lastName = lastname;
  
      $('.modal').modal();
  }
  </code></pre>
  
  <p>Has anybody had any experience doing this?</p>