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
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
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
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
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.
Good answer. One suggestion: you can use the built inhidden
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
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.
Good answer. One suggestion: you can use the built inhidden
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
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.
Good answer. One suggestion: you can use the built inhidden
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
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.
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
72538
72538
Good answer. One suggestion: you can use the built inhidden
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
add a comment |
Good answer. One suggestion: you can use the built inhidden
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
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