JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script id="template" type="text/template">
  Module type:
    <select class="module_type">
        <option value="" <%= model.hasModuleType() ? 'selected': '' %>>-</option>
        <option value="bar_chart" <%= model.isBarChart() ? 'selected': '' %>>Bar Chart</option>
        <option value="trend_chart" <%= model.isTrendChart() ? 'selected': '' %>>Trend Chart</option>
    </select>
    <br /> 
    <% if (model.hasModuleType()) { %>
    Dimension Values:
   <select class="dimension_values" <%= model.hasModuleType() && model.isBarChart() ? 'multiple' : '' %>>
      <% _.each(dimension_values, function(value) { %>
          <option value="<%= value %>"><%= value %></option>    
      <% }) %>
    </select>
              <% } %>
</script>

<div id="viewcontainer"></div>

JavaScript

//model definition
Module = Backbone.Model.extend({
    defaults: {
        'module_type': 'bar_chart'
    },
    
    isBarChart: function() {
      return this.get('module_type') === 'bar_chart';
    },
    
    isTrendChart: function() {
      return this.get('module_type') === 'trend_chart';
    },
    
    hasModuleType: function() {
      return this.get('module_type') !== '';
    }
});

//view definition
View = Backbone.View.extend({
    template: _.template($('#template').html()),
    
    el: '#viewcontainer',
    
    events: {
        'change .module_type': 'handleModuleTypeSelectChange'
    },
    
    initialize: function(options) {
      this.dimension_values = options.dimension_values || [];
      this.render();
        
        this.listenTo(this.model, 'change:module_type', this.render);
    },
    
    render: function() {
        this.$el.html(this.template({
            model: this.model,
            dimension_values: this.dimension_values
        }));
    },
    
    handleModuleTypeSelectChange: function() {
        this.model.set({
            module_type: this.$el.find('select.module_type').val()
        });
    }
});


//dummy hardcoded values
var DIMENSION_VALUES = [1,2,3,4,5];

//start view:

new View({
    model: new Module(),
    dimension_values: DIMENSION_VALUES
});