What are the common solutions for making clean id space in a SPA?

Question

Situation: several developers working remotely on different section/modules of a SPA. As a result they may accidentally introduce HTML elements with the same id. W

Answer 1

In one of my projects we got into this exact problem. Our quick solution and part of our next code maintenance/refactor cycle is to use identifiable html elements inherit the attributes of the JavaScript container with templates.

Let me go in more detail.

• We use Backbone.Marionette with Handlebars templating. For each template we have a custom View class (we extended Backbone.Marionette with more features as we went on) associated to each template. This View class has an ID and UI elements. The UI elements are compiled in the template, therefore we never have to change the HTML unless we change the UI element name in the view class itself. Therefore, we can change our Id of the UI element however we want and won't affect anything (almost).

• Since we use views for each widget, you can be sure their identifier or name or however you want to call it, is unique. We use that as a base for our Id's in our UI elements. This allows us Widget reuse.

• _.uniqueId() from the Underscore library is also used a lot for CollectionViews.

Hope I helped, cheers!