Discussions
Categories
- 196.7K All Categories
- 2.2K Data
- 234 Big Data Appliance
- 1.9K Data Science
- 449.7K Databases
- 221.5K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 549 MySQL Community Space
- 477 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 532 SQLcl
- 4K SQL Developer Data Modeler
- 186.8K SQL & PL/SQL
- 21.2K SQL Developer
- 295.3K Development
- 17 Developer Projects
- 138 Programming Languages
- 292K Development Tools
- 104 DevOps
- 3.1K QA/Testing
- 645.9K Java
- 27 Java Learning Subscription
- 37K Database Connectivity
- 153 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 17 Java Essentials
- 157 Java 8 Questions
- 85.9K Java Programming
- 79 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.2K Java SE
- 13.8K Java Security
- 203 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 387 LiveLabs
- 37 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.6K Other Languages
- 2.3K Chinese
- 170 Deutsche Oracle Community
- 1K Español
- 1.9K Japanese
- 230 Portuguese
How do i get current Data from Element created with oj-bind-for-each?

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
Best 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
-
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
-
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.