Aurelia Custom Element for modal form

Question

Simplified GistRun: https://gist.run/?id=e87e5664097f20a2950c4d0aa5bf1977

I'm trying to create a custom element in Aurelia to build a modal form container, as follows. However, the page is not loading. If I remove all of the ${} tags, it loads. Why is the binding for the custom element not working correctly? It seems like the problems are in the ref=${name_ref} , if.bind="${record_id}" and similar bindings. I'm able to display the values of all of the binded values as page content.

Also, even if I hardcode the ref of the custom element ( ref="edit_division" ), I still can't reference it from my parent JavaScript. I should be able to use $(this.edit_division).modal(); to open the modal, but it's not linking the ref.

Finally, the click.delegate="closeModal()" is not finding the function in the parent JavaScript.

modal-form.html

<template>

  <!-- Modal edit window -->
  <div class="modal fade" ref="${name_ref}" tabindex="-1" role="dialog" aria-labelledby="Edit Division">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header modal-header-success">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"><span if.bind="${record_id}" t="${label_edit}"></span><span if.bind="!${record_id}" t="${label_new}"></span></h4>
        </div>
        <div class="modal-body">
        <div class="alert alert-danger" if.bind="error">${error&t}</div>

        <slot><!-- Custom element inner content will be inserted here --></slot>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger pull-left" click.delegate="deleteRecord()" if.bind="${record_id}" tabindex=99><span t="Delete"></span></button>
          <button type="button" class="btn btn-secondary" click.delegate="closeModal()"><span t="Cancel"></span></button>
          <button type="button" class="btn btn-primary" click.delegate="saveRecord()"><span t="Save"></span></button>
        </div>
      </div>
    </div>
  </div>

</template>

modal-form.js

import { bindable } from 'aurelia-framework';

export class ModalFormCustomElement {

  @bindable name_ref;
  @bindable record_id;
  @bindable label_new;
  @bindable label_edit;
  @bindable error;

}

Implementation:

<modal-form name_ref="edit_division" record_id="division.div_id" label_new="New_Division" label_edit="Edit_Division">

  <form>
    <div class="form-group">
      <label class="control-label" for="div_code"><span t="Division_code"></span></label>
      <input type="text" class="form-control" ref="div_code" value.bind="division.div_code & validate" />
    </div>
    <div class="form-group">
      <label class="control-label" for="div_name"><span t="Division_name"></span></label>
      <input type="text" class="form-control" value.bind="division.div_name & validate">
    </div>
    <div class="form-group">
      <label class="control-label" for="div_principal_p_id"><span t="Principal"></span></label>
      <input type="text" class="form-control" value.bind="division.div_principal_p_id">
    </div>
  </form>

</modal-form>

Answer 1

Here's one part of the answer. You don't need string interpolation in bindings. For example, ref="${name_ref}" should be ref="name_ref" like so:

<div class="modal fade" ref="name_ref" tabindex="-1" role="dialog" aria-labelledby="Edit Division">

Answer 2

In case anyone is looking at this question later, I updated the GistRun with a working modal dialog via a custom element. Hopefully it can be helpful for someone else in the future!