Можно ли передать функцию из html в lit-элемент? - PullRequest
Новая
       5

Можно ли передать функцию из html в lit-элемент?

0 голосов
/ 12 ноября 2018

Я видел примеры передачи функции из родительского lit-элемента дочернему элементу, как здесь - 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.

1 Ответ

0 голосов
/ 12 ноября 2018

Код вашего элемента в порядке, то, что вы пытаетесь установить функцию, это то, что немного не так.

Видите ли, синтаксис, который вы используете, будет работать, если вы были в освещенном 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>

Вот глюк с минимальным примером чего-то похожего в действии

...