Aurelia Benutzerdefinierte Element für modale Formular

Question

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

Ich versuche, ein benutzerdefiniertes Element in Aurelia erstellen eine modale Form Behälter zu bauen, wie folgt. Die Seite wird jedoch nicht geladen. Wenn ich alle $ {} -Tags entferne, wird es geladen. Warum funktioniert die Bindung für das benutzerdefinierte Element nicht richtig? Es scheint, als ob die Probleme in den ref=${name_ref}, if.bind="${record_id}" und ähnlichen Bindungen sind. Ich kann die Werte aller binded Werte als Seiteninhalt anzeigen.

Auch, wenn ich die Ref des benutzerdefinierten Elements (ref="edit_division") hardcodiere, kann ich es immer noch nicht von meinem übergeordneten JavaScript verweisen. Ich sollte in der Lage sein, $(this.edit_division).modal(); zu verwenden, um das modale zu öffnen, aber es verbindet das ref nicht.

Schließlich findet click.delegate="closeModal()" nicht die Funktion im übergeordneten 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; 

} 

Umsetzung:

<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

Falls jemand auf dieser Frage später suchen, ich die GistRun mit einem Arbeits modalen Dialog über ein benutzerdefiniertes Element aktualisiert. Hoffentlich kann es für jemand anderen in der Zukunft hilfreich sein!

Answer 2

Hier ist ein pa rt der Antwort. Sie benötigen keine String-Interpolation in Bindungen. Zum Beispiel sollte ref="${name_ref}"ref="name_ref" wie so sein:

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