Aurelia Пользовательский элемент для модальной формы

Question

Упрощенная GistRun: https://gist.run/?id=e87e5664097f20a2950c4d0aa5bf1977

Я пытаюсь создать пользовательский элемент Aurelia для создания модальной формы контейнера, следующим образом. Однако страница не загружается. Если я удалю все теги $ {}, он загрузится. Почему привязка для пользовательского элемента работает неправильно? Похоже, что проблемы находятся в ref=${name_ref}, if.bind="${record_id}" и аналогичных привязках. Я могу отображать значения всех привязанных значений в качестве содержимого страницы.

Кроме того, даже если я жестко отредактировал ссылку на пользовательский элемент (ref="edit_division"), я до сих пор не могу ссылаться на его родительский JavaScript. Я должен был бы использовать $(this.edit_division).modal();, чтобы открыть modal, но это не ссылка ссылки.

И, наконец, click.delegate="closeModal()" не находит функцию в исходном JavaScript.

модальной 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> 

модальные-form.js

import { bindable } from 'aurelia-framework'; 

export class ModalFormCustomElement { 

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

} 

Реализация:

<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

В случае, если кто смотрит на этот вопрос позже, я обновил GistRun с рабочим модальным диалогом с помощью настраиваемого элемента. Надеюсь, это может быть полезно для кого-то еще в будущем!

Answer 2

Вот один год rt ответа. Вам не нужна строковая интерполяция в привязках. Например, ref="${name_ref}" должен быть ref="name_ref" так:

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