DHTML & "The Ember Way"


#1

I’m on a project where there’s a requirement to display N number of drop-downs, but 1 at a time. For example: when first entering the edit page a drop-down is displayed. after a selection has been made, a brand new drop-down is displayed before the first one. and so on until the maximum number has been reached.

Because I’ve been writing software for a while (just not front-ends) I immediately thought DHTML (yes I know it’s not a separate tech but the amalgamation of HTML, CSS, and JS). I haven’t written any (good) DHTML since jQuery 1.x. :wink: So, I’m trying to dust off, and update my DHTML skills.

But then I have this question: how would Ember do this? does Ember already support the idea of DHTML? If so, how?

Thanks, in advance, for any guidance received.


#2

Ember has templates, and you can have parts of the template show/hide based on conditional code in your component JavaScript. Attach a listener to the dropdown change events that fetches the data for the appropriate “next” dropdown. When a dropdown has data and the previous dropdowns have answers, display it. Otherwise hide it. Anytime a previous dropdown is changed, it should trigger a cascade of changes to the subsequent dropdowns (either clearing data or adjusting it based on the new selection).

Obviously a bit of a simplification. You’d likely want to create a dropdown component that can have it’s dropdown values passed to it as a prop so it updates based on data changes.

Hopefully this doesn’t bother anyone, but it’s one of the best writeups for thinking in SPA terms instead of jQuery (or DHTML style JS) for jQuery devs. It’s specifically about Angular, but the concepts apply to any SPA framework. https://stackoverflow.com/a/15012542/228429

PS. I say this kindly with a welcome back to the front end side of things - DHTML isn’t really a thing anymore. I at least haven’t heard DOM manipulation called that in quite a number of years.


#3

Thank you for the information. I was afraid my “age” would show when I posted the question. I appreciate the “welcome back” and the feedback.