模态形式

简体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

看起来你已经对主要内容进行了重大修改，而你的模态对话框基本上正在工作。是对的吗？ –

回答

相关问题