Question

Aurelia：我有一个自定义元素，应该执行位于父页面中的函数。自定义元素不“知道”它应该执行什么功能 - 它取决于父页面，并且当前我将该函数的名称作为属性发送到自定义元素（属性 - 焦点外操作 - 名）：

<form-input field-name="firstName" title="First Name" on-focus-out-action-name ="validateInput()" />

我设法在没有参数时运行该函数，但是当我想发送params（简单字符串类型也作为属性发送）时 - 没有成功

有更好的方法吗？最好的方法是如果我可以将函数作为对象传递（依赖注入？）

Answer 1

您应该使用call绑定命令。使用call绑定时将参数传递给函数的方法有点不对劲，但一旦理解了它，就很容易了。

在自定义元素中，您将对象传递给绑定函数。此函数的每个属性都将与绑定中的命名参数匹配。让我们来看看它的实际效果。在页面VM中，我将有一个功能：

 pageFunction(paramOne, paramtwo) {
   //.. stuff happens
 }

此功能将由自定义元素调用。所以在页面视图中，我们将编写如下的绑定：

 <my-element some-func.call="pageFunction(paramOne, paramTwo)"></my-element>

在my-element的VM中，我们可以调用绑定函数，并将参数传递给它：

this.someFunc({paramOne: this.someProp, paramTwo: this.otherProp});

我在这里创建了一个可运行的要点示例：https://gist.run/?id=864edc684eb107cdd71c58785b14d2f9

Answer 2

我更喜欢使用CustomEvent，这样可以在模板中清楚地知道发生了什么。

在您的组件中，您可以像这样调度事件 - “详细信息”可以是您想要的任何对象/数据：

let event = new CustomEvent('on-focus-out-action-name', { 
        detail: <some-data-you-want-to-send>,
        bubbles: true
    });
this.element.dispatchEvent(event);

你还需要在构造函数中注入元素（你还需要手动使用autoinject或者注入元素）

constructor(private element: Element) {}

您的父模板将如下所示：

<form-input field-name="firstName" 
  title="First Name" 
  on-focus-out-action-name.delegate="validateInput($event)" />

在您的父组件中，您使用您发送的数据，如下所示：

validateInput(event) {
    let data = event.detail;
    // do stuff
}

查看此博文，了解更多详情https://ilikekillnerds.com/2015/08/aurelia-custom-elements-custom-callback-events-tutorial/

Answer 3

我设法在Aurelia中做到了：这是带有foucusout.trigger的自定义元素，它在适当的时间调用focusoutAction：

<template>
 <label>
     ${title} - ${fieldName}<input title.bind="title" 
     focusout.trigger="focusoutAction()" focusin.trigger="focusInAction()" 
     class="${cssClass}" />
  </label>
</template>

这是使用focusout.call属性在父视图中使用自定义元素：

<form-input field-name="firstName" title="First Name" 
  place-holder="Enter first name" 
  on-focusout.call="validateInput(nameOfElement)" />

这是自定义控件的视图模型中的相关代码：

@bindable onFocusout;

focusoutAction() {
  var args =
  {
     nameOfElement: this.fieldName
  };
  this.onFocusout(args);
}

从自定义元素执行位于父页面中的js函数的最佳方法

3 个答案: