Можно ли передать функцию из html в 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.


javascript polymer lit-element
person Joelio    schedule 12.11.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

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

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

person Alan Dávalos    schedule 12.11.2018
comment
Спасибо, я обнаружил, что могу также всплывать и обрабатывать событие в родительском элементе, это предпочтительный способ сделать это или это предпочтительнее? - person Joelio; 12.11.2018
comment
Что ж, это довольно реактивный способ делать что-то, общий консенсус, похоже, заключается в том, что просто всплытие события лучше, потому что, например, если в новой версии вы измените то, что resultLatLong получает при его вызове, это может сломать много вещей, с событием немного легче избежать таких проблем с обслуживанием, и это также помогает для повторного использования между проектами - person Alan Dávalos; 13.11.2018

arrow_upward
2
arrow_downward

Вы также можете настроить наблюдаемые атрибуты в своем свойстве resultingLatLong в своем lat-long-chooser и установить attribute: false следующим образом:

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

Это предотвратит создание наблюдаемого атрибута для свойства.

person alexandre_anicio    schedule 16.12.2020