amp-bind JS operation inside 'on' attribute










0















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)">












share|improve this question


























    0















    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)">












    share|improve this question
























      0












      0








      0








      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)">












      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 12 '18 at 16:31









      AgoHHAgoHH

      587




      587






















          1 Answer
          1






          active

          oldest

          votes


















          2














          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.






          share|improve this answer























          • 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










          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
          );



          );













          draft saved

          draft discarded


















          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









          2














          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.






          share|improve this answer























          • 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















          2














          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.






          share|improve this answer























          • 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













          2












          2








          2







          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.






          share|improve this answer













          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 13 '18 at 6:55









          Chris Aby AntonyChris Aby Antony

          72538




          72538












          • 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

















          • 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
















          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

















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Use pre created SQLite database for Android project in kotlin

          Darth Vader #20

          Ondo