amp-bind JS operation inside 'on' attribute
I want to listen to an event (on change, in this case) and perform different actions depending on the value of a variable stored in the state. Is it possible to use the operation expr '?' expr ':' expr within the on attribute?
An example is here, where the first time the value changes (autofill equals 0) I will do an action but the rest of the times (autofills > 0) a different one. I've never seen this in practice so I do not know to which point this is possible. I tried the following two ways.
Thanks!
<select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">
<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}} :
{selection: {Tamanho: event.value}})">amp-html amp-bind
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
add a comment |
I want to listen to an event (on change, in this case) and perform different actions depending on the value of a variable stored in the state. Is it possible to use the operation expr '?' expr ':' expr within the on attribute?
An example is here, where the first time the value changes (autofill equals 0) I will do an action but the rest of the times (autofills > 0) a different one. I've never seen this in practice so I do not know to which point this is possible. I tried the following two ways.
Thanks!
<select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">
<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}} :
{selection: {Tamanho: event.value}})">amp-html amp-bind
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
add a comment |
I want to listen to an event (on change, in this case) and perform different actions depending on the value of a variable stored in the state. Is it possible to use the operation expr '?' expr ':' expr within the on attribute?
An example is here, where the first time the value changes (autofill equals 0) I will do an action but the rest of the times (autofills > 0) a different one. I've never seen this in practice so I do not know to which point this is possible. I tried the following two ways.
Thanks!
<select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">
<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}} :
{selection: {Tamanho: event.value}})">amp-html amp-bind
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
I want to listen to an event (on change, in this case) and perform different actions depending on the value of a variable stored in the state. Is it possible to use the operation expr '?' expr ':' expr within the on attribute?
An example is here, where the first time the value changes (autofill equals 0) I will do an action but the rest of the times (autofills > 0) a different one. I've never seen this in practice so I do not know to which point this is possible. I tried the following two ways.
Thanks!
<select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">
<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}} :
{selection: {Tamanho: event.value}})"><select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">
<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}} :
{selection: {Tamanho: event.value}})"><select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">
<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
Impressao: 'Verde$ Rojo',
autofill: order.autofill+1}} :
{selection: {Tamanho: event.value}})">amp-html amp-bind
amp-html amp-bind
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
asked Nov 12 '18 at 16:31
AgoHHAgoHH
587
587
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
As far as I know, it is not possible to write such conditions inside on attribute. The documentation states as follows:
The value for the syntax is a simple domain-specific language of the
form:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
As a workaround, you can use duplicate select tags with different actions for the on attribute and conditionally render only one of them at a time by applying your condition using amp-bind.
For example :
<select name="tamanho"
[class]="selection.autofill == 0 ? 'hide' : '' "
on="change:AMP.setState({ selection : 'ABCD' })">
<select name="tamanho"
class="hide"
[class]="selection.autofill == 0 ? '' : 'hide' "
on="change:AMP.setState({ selection : 'WXYZ' })">
and define class hide as follows:
.hide{
display:none;
}
One drawback here would be that you can't assign id to the select tags since there would be duplicate ids.
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
Good answer. One suggestion: you can use the built inhiddenattribute instead of defining your on class.
– Sebastian Benz
Nov 22 '18 at 15:46
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
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%2f53266380%2famp-bind-js-operation-inside-on-attribute%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
As far as I know, it is not possible to write such conditions inside on attribute. The documentation states as follows:
The value for the syntax is a simple domain-specific language of the
form:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
As a workaround, you can use duplicate select tags with different actions for the on attribute and conditionally render only one of them at a time by applying your condition using amp-bind.
For example :
<select name="tamanho"
[class]="selection.autofill == 0 ? 'hide' : '' "
on="change:AMP.setState({ selection : 'ABCD' })">
<select name="tamanho"
class="hide"
[class]="selection.autofill == 0 ? '' : 'hide' "
on="change:AMP.setState({ selection : 'WXYZ' })">
and define class hide as follows:
.hide{
display:none;
}
One drawback here would be that you can't assign id to the select tags since there would be duplicate ids.
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
Good answer. One suggestion: you can use the built inhiddenattribute instead of defining your on class.
– Sebastian Benz
Nov 22 '18 at 15:46
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
add a comment |
As far as I know, it is not possible to write such conditions inside on attribute. The documentation states as follows:
The value for the syntax is a simple domain-specific language of the
form:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
As a workaround, you can use duplicate select tags with different actions for the on attribute and conditionally render only one of them at a time by applying your condition using amp-bind.
For example :
<select name="tamanho"
[class]="selection.autofill == 0 ? 'hide' : '' "
on="change:AMP.setState({ selection : 'ABCD' })">
<select name="tamanho"
class="hide"
[class]="selection.autofill == 0 ? '' : 'hide' "
on="change:AMP.setState({ selection : 'WXYZ' })">
and define class hide as follows:
.hide{
display:none;
}
One drawback here would be that you can't assign id to the select tags since there would be duplicate ids.
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
Good answer. One suggestion: you can use the built inhiddenattribute instead of defining your on class.
– Sebastian Benz
Nov 22 '18 at 15:46
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
add a comment |
As far as I know, it is not possible to write such conditions inside on attribute. The documentation states as follows:
The value for the syntax is a simple domain-specific language of the
form:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
As a workaround, you can use duplicate select tags with different actions for the on attribute and conditionally render only one of them at a time by applying your condition using amp-bind.
For example :
<select name="tamanho"
[class]="selection.autofill == 0 ? 'hide' : '' "
on="change:AMP.setState({ selection : 'ABCD' })">
<select name="tamanho"
class="hide"
[class]="selection.autofill == 0 ? '' : 'hide' "
on="change:AMP.setState({ selection : 'WXYZ' })">
and define class hide as follows:
.hide{
display:none;
}
One drawback here would be that you can't assign id to the select tags since there would be duplicate ids.
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
As far as I know, it is not possible to write such conditions inside on attribute. The documentation states as follows:
The value for the syntax is a simple domain-specific language of the
form:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
As a workaround, you can use duplicate select tags with different actions for the on attribute and conditionally render only one of them at a time by applying your condition using amp-bind.
For example :
<select name="tamanho"
[class]="selection.autofill == 0 ? 'hide' : '' "
on="change:AMP.setState({ selection : 'ABCD' })">
<select name="tamanho"
class="hide"
[class]="selection.autofill == 0 ? '' : 'hide' "
on="change:AMP.setState({ selection : 'WXYZ' })">
and define class hide as follows:
.hide{
display:none;
}
One drawback here would be that you can't assign id to the select tags since there would be duplicate ids.
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
answered Nov 13 '18 at 6:55
Chris Aby AntonyChris Aby Antony
71538
71538
Good answer. One suggestion: you can use the built inhiddenattribute instead of defining your on class.
– Sebastian Benz
Nov 22 '18 at 15:46
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
add a comment |
Good answer. One suggestion: you can use the built inhiddenattribute instead of defining your on class.
– Sebastian Benz
Nov 22 '18 at 15:46
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
Good answer. One suggestion: you can use the built in
hidden attribute instead of defining your on class.– Sebastian Benz
Nov 22 '18 at 15:46
Good answer. One suggestion: you can use the built in
hidden attribute instead of defining your on class.– Sebastian Benz
Nov 22 '18 at 15:46
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
I created a FR here: github.com/ampproject/amphtml/issues/19435
– AgoHH
Nov 22 '18 at 16:18
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.
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%2f53266380%2famp-bind-js-operation-inside-on-attribute%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
