I use Smarty to handle my views. To maximize code reuse, I split up my view files into small segments and just include them where ever they are needed. This works well as it keeps my markup consistent when rendered on the browser.
The problem is that I also have JS that will do certain DOM manipulations. It means that my JS needs to have an awareness of the mark up structure, etc. And in a lot of cases, the JS is forced to maintain an identical copy of the mark up that already exist in the Smarty template files.
This is going to become a maintenance nightmare as any changes to the mark up must be done in the Smarty template files and possibly in the JS mark up.
Any suggestions on how to handle this elegantly? Or do I just accept this as a necessary evil?
Do the same with your JavaScript. Think modular and make modules instead of pages. Any module would include HTML(Smarty in your case), JavaScript and CSS. Any page that needs that modules should require those three files. Or you can bundle all together to make including modules easier. When you create module then you will edit modules not pages. That way you won’t break things by editing JavaScript or CSS/HTML.
A module could be anything that can have independency of other modules in a page. Of course modules could talk to each other but you need to define a consistant API for your module system.
This approach would make maintenance easier but the downside is you have to almost rewrite your entire app to make it modular.