Forum Stats

  • 3,826,191 Users
  • 2,260,605 Discussions
  • 7,896,810 Comments

Discussions

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

User_INPR6
User_INPR6 Member Posts: 10 Green Ribbon

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:

Best Answer

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,793 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.

Answers

  • Philip Sommer
    Philip Sommer Member Posts: 103 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

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,793 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.