用于模态表单的 Aurelia 自定义元素答案

【问题标题】：Aurelia Custom Element for modal form用于模态表单的 Aurelia 自定义元素
【发布时间】：2016-11-09 15:39:49
【问题描述】：

简化的 GistRun：https://gist.run/?id=e87e5664097f20a2950c4d0aa5bf1977

我正在尝试在 Aurelia 中创建一个自定义元素来构建一个模态表单容器，如下所示。但是，页面未加载。如果我删除所有 ${} 标签，它会加载。为什么自定义元素的绑定无法正常工作？似乎问题出在ref=${name_ref}、if.bind="${record_id}" 和类似的绑定中。我能够将所有绑定值的值显示为页面内容。

另外，即使我硬编码了自定义元素的引用 (ref="edit_division")，我仍然无法从我的父 JavaScript 中引用它。我应该可以使用$(this.edit_division).modal(); 打开模式，但它没有链接参考。

最后，click.delegate="closeModal()" 在父 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;

}

实施：

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

【问题讨论】：

你看过 aurelia-dialog 插件吗？
它做模态形式吗？
是的。 aurelia-dialog 插件执行模态表单。我还没有太多使用它，但你可能想考虑走这条路。我相信它是非常可定制的，可以帮助您在 gistrun 中创建模态（顺便说一句，这很好）。

标签： aurelia

【解决方案1】：

这是答案的一部分。您不需要在绑定中进行字符串插值。例如，ref="${name_ref}" 应该是 ref="name_ref"，如下所示：

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

【讨论】：

我试过了，但它只是将纯文本“name_ref”用于属性。
看起来您已经对要点进行了重大更改，并且您的模式对话框基本上可以正常工作。对吗？
是的...我在 Aurelia 支持 Gitter 频道中获得了一些帮助，以解决其他问题。谢谢你的帮助——你说得对，我不需要在绑定中进行字符串插值，但看起来实际的“ref”属性在自定义控件中不起作用，或者至少不像我想象的那样起作用。

【解决方案2】：

如果以后有人看到这个问题，我会通过自定义元素更新 GistRun 并使用一个工作模式对话框。希望以后可以对其他人有所帮助！

【讨论】：