Reputation: 1137
Say I have a dictionary website, and in one div, I display the word, its definition and an example. I need to refer to those strings somewhere else. Is it generally acceptable to just pull them out of the div (find element by Id, get value), or is it better to create an object representing everything in that div, and avoid the DOM when I need to query its values?
Further Explanation: Someone can click on an element on the page (the element just displays the word), and in another div, it displays the definition and example of that word(the element is associated with an object that contains all of this information). In that other div, there are textareas which display the definition and example. I want someone to be able to edit the text there, and for it to then update the values in the word object. Should I just get the text from those textareas and send it to the word object, or should I have an "edit div" object, containing the strings in the text areas, and just send the values between the two objects?
Upvotes: 4
Views: 126
Reputation: 4783
The approach you describe would quickly become hard to maintain and test. I imagine if you had a dictionary site you'd have a backend containing all the words. You'd need to use JavaScript to get that data - so you'd probably bind your UI to the data retrieved from that backend and the JS objects would be the place that everything else gets looked up from.
This approach disconnects your UI from the underlying data and doesn't create a mangled mess of UI referring to other UI.
I'd recommend reading about how to use a single page app framework such as AngularJS, DurandalJS or EmberJS in order to structure things 'correctly'.
Upvotes: 1