[backbonejs] How to Create Dynamic Template (Configurable Columns)

My app is using Backbone, Underscore, Marionette.

I have a .html template files - Collection template with header columns and Model template for matching data columns.

However, I need to add/remove columns based on configuration per user.

First approach was with CSS in the View (hide columns) - BUT Sorting and Paging features add all the original columns back when user clicks Header or Next Page.

What's the best practices way to create/insert a dynamic template?

Do I use something like the following to create template in each view (Collection and Model)

this.$el.html(template);

In other words:
1. Create dynamic template in View
2 .Override static template with dynamic template
?



You can try require.js.



How “dynamic” is dynamic? That is, will what you show/hide vary from session to session, user to user, or will you be hiding/showing the same fields? If it’s the latter, you can use a couple of different templates then switch between them depending upon what you want to show. Then irrespective of the view being a “regular” or sorted, or paged view, the template will only display the data that it expects.



To explain further:

In a configuration console, a user will list the fields of processes (out of 6) that will be displayed

Up until now, I had a Process Collection Model, Process Model, Process Collection Template (Header), Process Template (Data), Process Collection View, Process View.

Now, lets say there are 4 fields listed in configuration, in the view I can use css to hide 2 columns in existing template (Process Collection and Process). 

But need to call the function again in Sorting and Paging sections.

What I want to do is over-ride the existing templates - Process Collection Template (Header), Process Template (Data).

I think that can be done but I want to make sure to avoid unbinding events.