Search code examples
javascriptbackbone.js

backbone.js - How to get rid of div? - how to render option?

I need to render a select with backbone.js. However it always injects a wrapper div?

Trying to set the tagName: '' is not allowed. 

var MuppetsListItemView = Backbone.View.extend({
        tagName: '',//leads to error 

        render: function() {
            this.$el.html('<option id="'+this.model.get('id')+'">'+this.model.get('key')+'</option>');
            return this;
          },

If I want to handle the HTML completly on my own, how can I achieve this, without backbone interfering and adding a div?

Or alternatively, if someone can explain how this would be renderd with backbone injecting arbitrary attributes into an <option> tag when setting that tag as tagName:, this would also be great. (What I mean is, what do I have to do that backbone injects the ID and KEY in the HTML above "automatically" in the option tag (but not using any templating system)). Thanks!

Solution

  • You want to use View.attributes for the id and just use templates for setting the content of the option like normal.

    http://backbonejs.org/#View-attributes http://backbonejs.org/#View-template

    var MuppetsListItemView = Backbone.View.extend({
  tagName: 'option',
  attributes: function() {
    return {
      id: this.model.get('id'),
    };
  },
...

    If you are unfamiliar with using templates with Backbone views, here is a guide: http://codebeerstartups.com/2012/12/how-to-use-templates-in-backbone-js-learning-backbone-js/