模態形式

簡體GistRun奧裏利亞自定義元素：https://gist.run/?id=e87e5664097f20a2950c4d0aa5bf1977 模態形式

我試圖創建一個奧裏利亞自定義元素構建一個模式窗體容器，如下所示。但是，該頁面未加載。如果我刪除所有$ {}標籤，則會加載它。爲什麼自定義元素的綁定無法正常工作？看起來問題出現在ref=${name_ref}，if.bind="${record_id}"和類似的綁定中。我可以將所有綁定值的值顯示爲頁面內容。

另外，即使我硬編碼自定義元素的參考（ref="edit_division"），我仍然無法從我的父級JavaScript中引用它。我應該可以使用$(this.edit_division).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>

來源

2016-11-09 LStarky

你看過aurelia-dialog插件嗎？ –

它是否做模態形式？ – LStarky

是的。 aurelia-dialog插件確實以模態形式出現。我還沒有使用它，但你可能想要考慮走這條路。我相信它是非常可定製的，並且可以幫助你在你的gistrun（這是很好的BTW）中創建模態。 –

如果有人在後面看着這個問題，我更新了通過自定義元素的工作模態對話框GistRun。希望它對未來的其他人有所幫助！

來源

2016-11-10 21:42:00 LStarky

這裏有一個PA答案的rt。您不需要綁定中的字符串插值。例如，ref="${name_ref}"應該ref="name_ref"像這樣：

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

來源

2016-11-09 16:44:06

我試過了，但它只是把屬性的純文本「name_ref」。 – LStarky

我更新了GistRun來證明這一點。 – LStarky

看起來你已經對主要內容進行了重大修改，而你的模態對話框基本上正在工作。是對的嗎？ –

回答

相關問題