Forum Stats

  • 3,814,145 Users
  • 2,258,827 Discussions
  • 7,892,587 Comments

Discussions

Categories

How do i get current Data from Element created with oj-bind-for-each?

User_INPR6
User_INPR6 Member Posts: 10 Green Ribbon
in Oracle JET

Hey there,

so i created an oj-bind-for-each with a div with an oj-bind-text inside. I added a eventlistener to the div. On Click it should return me the current value of the oj-bind-text. 

<oj-bind-for-each data="{{baudeliste}}">
        <template>
        <div  onclick="openListener()">
           <div><oj-bind-text value="[[$current.data.Gebaeud]]"></oj-bind-text></div> 
        </div>
    </template>
    </oj-bind-for-each>

How do I get the value that was just clicked?

Thank you

Tagged:
· Share on TwitterShare on Facebook

Best Answer

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,774 Employee
    Answer ✓

    Another way to do this, that doesn't expose you to running inline functions, would be to do this

      <oj-bind-for-each data="{{baudeliste}}">
    <template>
      <div on-click="[[openListener]]">
        <div>
          <oj-bind-text value="[[$current.data.Gebaeud]]"></oj-bind-text>
        </div>
      </div>
    </template>
  </oj-bind-for-each>

    and then your JavaScript will be passed three arguments as Philip linked to with the CustomElementsOverview link.

        this.openListener = (event, item, ctx) => {
      console.log(JSON.stringify(item.data));
    }

    While I'm showing how this can be done, I would never recommend this code. It will not meet Accessibility standards at all, and a keyboard user would not be able to interact with your items. Use the semantics of HTML for the correct purpose. Make that <div> an <a> and get what HTML provides you.

    · Share on TwitterShare on Facebook

Answers

  • Philip Sommer
    Philip Sommer Member Posts: 101 Blue Ribbon

    Hi User_INPR6,


    I would suggest using a JET component/event instead of an onclick listener for this. Take a look at the menuListener implementation for https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=actionTable

    JET events provide you with an additional context parameter which you can use to infer the clicked item. See https://www.oracle.com/webfolder/technetwork/jet/jsdocs/CustomElementOverview.html#ce-events-section for documentation.


    If you must use the div onclick event I would try something like:

    onclick="[[getClickListenerFor($current.data.index)]]"

    Where the getClickListener returns the listener function with the current index as a function closure:

    function getClickListenerFor(index) { 

    return () => { <your logic here> }

    } 

    (Code above not tested. Probably needs tweaking.)


    Kind Regards,

    Philip

    · Share on TwitterShare on Facebook
  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,774 Employee
    Answer ✓

    Another way to do this, that doesn't expose you to running inline functions, would be to do this

      <oj-bind-for-each data="{{baudeliste}}">
    <template>
      <div on-click="[[openListener]]">
        <div>
          <oj-bind-text value="[[$current.data.Gebaeud]]"></oj-bind-text>
        </div>
      </div>
    </template>
  </oj-bind-for-each>

    and then your JavaScript will be passed three arguments as Philip linked to with the CustomElementsOverview link.

        this.openListener = (event, item, ctx) => {
      console.log(JSON.stringify(item.data));
    }

    While I'm showing how this can be done, I would never recommend this code. It will not meet Accessibility standards at all, and a keyboard user would not be able to interact with your items. Use the semantics of HTML for the correct purpose. Make that <div> an <a> and get what HTML provides you.

    · Share on TwitterShare on Facebook