模态形式的Aurelia自定义元素
简化GistRun: 我试图在Aurelia中创建一个自定义元素来构建一个模态表单容器,如下所示。但是,该页面未加载。如果我删除所有${}标记,它将加载。为什么自定义元素的绑定不能正常工作?问题似乎出现在模态形式的Aurelia自定义元素,aurelia,Aurelia,简化GistRun: 我试图在Aurelia中创建一个自定义元素来构建一个模态表单容器,如下所示。但是,该页面未加载。如果我删除所有${}标记,它将加载。为什么自定义元素的绑定不能正常工作?问题似乎出现在ref=${name\u ref},if.bind=“${record\u id}”和类似的绑定中。我能够将所有绑定值的值显示为页面内容 此外,即使我硬编码自定义元素的ref(ref=“edit\u division”),我仍然无法从父JavaScript引用它。我应该能够使用$(this.ed
ref=${name\u ref}
,if.bind=“${record\u id}”
和类似的绑定中。我能够将所有绑定值的值显示为页面内容
此外,即使我硬编码自定义元素的ref(ref=“edit\u division”
),我仍然无法从父JavaScript引用它。我应该能够使用$(this.edit_division).modal()代码>打开模式,但它没有链接参考
最后,click.delegate=“closeModal()”
在父JavaScript中找不到该函数
模态表单.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">×</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 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>
以下是答案的一部分。绑定中不需要字符串插值。例如,ref=“${name\u ref}”
应该是ref=“name\u ref”
这样:
<div class="modal fade" ref="name_ref" tabindex="-1" role="dialog" aria-labelledby="Edit Division">
以下是答案的一部分。绑定中不需要字符串插值。例如,ref=“${name\u ref}”
应该是ref=“name\u ref”
这样:
<div class="modal fade" ref="name_ref" tabindex="-1" role="dialog" aria-labelledby="Edit Division">
如果以后有人看到这个问题,我通过一个自定义元素用一个工作模式对话框更新了GistRun。希望它能在将来对其他人有所帮助 如果以后有人看到这个问题,我通过一个自定义元素用一个工作模式对话框更新了GistRun。希望它能在将来对其他人有所帮助 你看过aurelia对话框插件吗?它做模态形式吗?是的。aurelia对话框插件不支持模态形式。我还没怎么用过它,但你可能想看看这条路线。我相信它是非常可定制的,可以帮助您创建类似gistrun的模态(顺便说一句,这很好)。您看过aurelia对话框插件吗?它做模态形式吗?是的。aurelia对话框插件不支持模态形式。我还没怎么用过它,但你可能想看看这条路线。我相信它是非常可定制的,可以帮助您创建类似gistrun的模态(顺便说一句,这很好)。我尝试过,但它只是为属性添加了纯文本“name_ref”。看起来您对要点做了重大更改,模态对话框基本上可以正常工作。是吗?是的。。。我在Aurelia support Gitter频道得到了一些帮助,以解决其他问题。谢谢你的帮助——你说得对,我在绑定中不需要字符串插值,但实际的“ref”属性在自定义控件中似乎不起作用,或者至少不像我想象的那样起作用。我试过了,但它只是把纯文本“name\u ref”放进去了对于属性。看起来您对要点进行了重大更改,并且模态对话框基本上正常工作。是吗?是的。。。我在Aurelia support Gitter频道得到了一些帮助,以解决其他问题。感谢您的帮助——您说得对,我在绑定中不需要字符串插值,但实际的“ref”属性在自定义控件中似乎不起作用,或者至少不像我想象的那样起作用。