是否可以将函数从 html 传递到 lit-element？

Question

我见过将函数从父 lit-element 传递给像这里这样的子元素的示例 - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4

但是我希望我的元素的用户不要被迫创建一个包装元素来使用我的元素。

例如，我的元素是一个计算某些值的对话框。

我希望我可以做这样的事情（使用我的元素的 html）：

<script>
 function latLongResult(lat,long)
    {
        console.log("resulting lat long called");
    }

</script>
    <lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>

然后在我的元素中：

export class LatLongChooser extends LitElement {


static get properties() {
    return {
      latDecimalDegrees: Number,
      longDecimalDegrees: Number,
      resultingLatLong: {
        type: Function,
      }
    };
  }

saveConvertedValues() {
       console.log("save other values called");
       this.resultingLatLong(this.latDecimalDegrees,this.longDecimalDegrees)
      }

当我尝试这个时，我收到 JavaScript 错误。

Answer 1

你元素的代码很好，你试图设置函数的方式有点不对劲。

你看，如果你在 lit-html/lit-element 渲染函数中，你使用的语法会起作用（只需进行一些更正，它就会是.resultingLatLong=${latLongResult}）

但是，由于您在主要级别的脚本中，您应该执行以下操作：

<script>
 function latLongResult(lat,long){
    console.log("resulting lat long called");
 }
 // do it like this so that it's set as a property, setting it as an attribute would require some rather complicated extra code
 document.querySelector('#latLongDialog').resultingLatLong = latLongResult;

</script>
<lat-long-chooser id="latLongDialog"></lat-long-chooser>

这是一个小故障，其中包含一个类似操作的最小示例