Generic template for populating select list data in Backbone views?

Question

My Backbone has several views containing forms with text inputs, fields, and check boxes. The selection fields should be filled using data from my API. This selection field can be reused in several different forms.

What is the commonly used approach to populate these dropdowns? Here is the solution I put together ... Is there a more general approach?

A reusable field that fills itself ... app / views / shared / location_selection.js:

define([ 'jquery', 'backbone', 'app/views/base', 'app/collections/location' ], function($, Backbone, BaseView, LocationCollection) { 'use strict'; return BaseView.extend({ initialize: function(options) { this.options = options || {}; this.options.id = this.options.id || 'location'; this.options.showBlank = typeof this.options.showBlank != 'undefined' ? this.options.showBlank : false; this.collection = new LocationCollection(); }, render: function() { this.setElement('<select id="' + this.options.id + '"></select>'); var self = this; this.collection.fetch({ success: function() { if (self.options.showBlank) { self.$el.append('<option></option'); } self.collection.each(function(model) { self.$el.append('<option value="' + model.get('id') + '">' + model.get('name') + '</option>'); }); } }); return this; } }); }); 

And a snippet from another view that uses this view:

 render: function() { this.$el.html(this.template(this.model.toJSON())); var locationSelectionView = new LocationSelectionView({ showBlank: !this.model.get('id') }); this.$('.location').append(locationSelectionView.render().el); return this; }, 

And the form template:

 <form role="form"> <div class="form-group"> <label for="imei">IMEI</label> <input type="text" class="form-control" id="imei" value="{{data.imei}}" /> </div> <div class="form-group location"> <label for="location">Location</label> </div> <div class="checkbox"> <label><input id="master" type="checkbox"{{#if master}} checked="checked"{{/if}} /> Master</label> </div> </form> 

Answer 1

If you have separate templates to represent your look and collection, you can do it this way:

 var ItemView = Backbone.View.extend({ tagName: 'option', initialize:function(){ this.template= _.template($('#menu_item_view').html()); }, render:function(){ this.$el.html(this.template(this.model.toJSON())); return this; } }); var CollectionView = Backbone.View.extend({ tagName: 'select', initialize:function(){ this.collection = new ItemCollection(); this.collection.on('sync',this.render,this); this.collection.fetch(); }, render:function(){ _.each(this.collection.models,function( item ){ this.$el.append(new ItemView({model:item}).render().el ); },this); return this; } }); 

Edit: as a note, before Backbone 1.0 when calling fetch is used to run 'reset', but now it causes synchronization if you don't write fetch ({reset: true}). Therefore, depending on the version of Backbone you are using, keep this in mind.