Is it possible to pass a function from html into a lit-element?
I have seen examples of passing a function from a parent lit-element to a child one like here - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4
But I want the users of my element, not to be forced to create a wrapper element to use my element.
For example, my element is a dialog that computes some value.
I was hoping I could do something like this (html using my element):
<script>
function latLongResult(lat,long)
{
console.log("resulting lat long called");
}
</script>
<lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>
And then in my element:
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)
}
When I try this, I get JavaScript errors.
javascript polymer lit-element
asked Nov 12 '18 at 15:27
Joelio
2,20742863
add a comment |
I have seen examples of passing a function from a parent lit-element to a child one like here - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4
But I want the users of my element, not to be forced to create a wrapper element to use my element.
For example, my element is a dialog that computes some value.
I was hoping I could do something like this (html using my element):
<script>
function latLongResult(lat,long)
{
console.log("resulting lat long called");
}
</script>
<lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>
And then in my element:
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)
}
When I try this, I get JavaScript errors.
javascript polymer lit-element
asked Nov 12 '18 at 15:27
Joelio
2,20742863
add a comment |
I have seen examples of passing a function from a parent lit-element to a child one like here - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4
But I want the users of my element, not to be forced to create a wrapper element to use my element.
For example, my element is a dialog that computes some value.
I was hoping I could do something like this (html using my element):
<script>
function latLongResult(lat,long)
{
console.log("resulting lat long called");
}
</script>
<lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>
And then in my element:
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)
}
When I try this, I get JavaScript errors.
javascript polymer lit-element
asked Nov 12 '18 at 15:27
Joelio
2,20742863
I have seen examples of passing a function from a parent lit-element to a child one like here - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4
But I want the users of my element, not to be forced to create a wrapper element to use my element.
For example, my element is a dialog that computes some value.
I was hoping I could do something like this (html using my element):
<script>
function latLongResult(lat,long)
{
console.log("resulting lat long called");
}
</script>
<lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>
And then in my element:
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)
}
When I try this, I get JavaScript errors.
javascript polymer lit-element
javascript polymer lit-element
asked Nov 12 '18 at 15:27
Joelio
2,20742863
asked Nov 12 '18 at 15:27
Joelio
2,20742863
asked Nov 12 '18 at 15:27
Joelio
2,20742863
asked Nov 12 '18 at 15:27
Joelio
2,20742863
asked Nov 12 '18 at 15:27
Joelio
2,20742863
2,20742863
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Your element's code is fine, the way you're trying to set the function is what's a bit off.
You see, the syntax you're using would work if you were in a lit-html/lit-element render function (just with a few corrections, it would be .resultingLatLong=${latLongResult})
However, since you're in a script at the main level you should do something like this:
<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>
Here's a glitch with a minimal example of something similar in action
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265266%2fis-it-possible-to-pass-a-function-from-html-into-a-lit-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your element's code is fine, the way you're trying to set the function is what's a bit off.
You see, the syntax you're using would work if you were in a lit-html/lit-element render function (just with a few corrections, it would be .resultingLatLong=${latLongResult})
However, since you're in a script at the main level you should do something like this:
<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>
Here's a glitch with a minimal example of something similar in action
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
add a comment |
Your element's code is fine, the way you're trying to set the function is what's a bit off.
You see, the syntax you're using would work if you were in a lit-html/lit-element render function (just with a few corrections, it would be .resultingLatLong=${latLongResult})
However, since you're in a script at the main level you should do something like this:
<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>
Here's a glitch with a minimal example of something similar in action
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
add a comment |
Your element's code is fine, the way you're trying to set the function is what's a bit off.
You see, the syntax you're using would work if you were in a lit-html/lit-element render function (just with a few corrections, it would be .resultingLatLong=${latLongResult})
However, since you're in a script at the main level you should do something like this:
<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>
Here's a glitch with a minimal example of something similar in action
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
Your element's code is fine, the way you're trying to set the function is what's a bit off.
You see, the syntax you're using would work if you were in a lit-html/lit-element render function (just with a few corrections, it would be .resultingLatLong=${latLongResult})
However, since you're in a script at the main level you should do something like this:
<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>
Here's a glitch with a minimal example of something similar in action
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
answered Nov 12 '18 at 18:32
Alan Dávalos
1,292516
1,292516
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
add a comment |
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Thanks, I found that I could also bubble an event up and handle it in the parent, is that the preferred way to do it, or is this preferred?
– Joelio
Nov 12 '18 at 20:40
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
Well, this is a rather react-ish way of doing things, the general consensus seems to be that just bubbling an event is better, because for example, if in a new version you change what resultingLatLong receives when it's called it might break down a lot of things, with an event it's a bit easier to avoid those kind of maintenance hell issues and it also helps for reusability between projects
– Alan Dávalos
Nov 12 '18 at 21:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265266%2fis-it-possible-to-pass-a-function-from-html-into-a-lit-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
