javascript - 是否可以将 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>

这是 glitch有一个类似的行为的最小例子