Backbone.js binding dynamic el generation

Question

I have a small problem where I am creating a view and dynamically creating the "el" element and passing it on to the view that I am creating.

var divIdentification = ".data-identification-"+this.model.dataTypeId+"-"+this.model.dataGrouping.get("data1Id")+"-"+this.model.dataGrouping.get("data2Id");

THE FOLLOWING WORKS

var roomOccupancyView = new Bookings.RoomOccupancyView({
                    model: datas,
                    el: "div"
                });

HOWEVER THE FOLLOWING DOES NOT

var divIdentification = ".data-identification-"+this.model.dataTypeId+"-"+this.model.dataGrouping.get("data1Id")+"-"+this.model.dataGrouping.get("data2Id");

    var roomOccupancyView = new Bookings.RoomOccupancyView({
                        model: datas,
                        el: divIdentification 
                    });

When I try placing a console.log for el in the child view for the first scenario where I pass el as a string I get the following object

<div class="header-container">

HOWEVER when I pass the variable I get "undefined".

Additionally I also tried wrapping the variable output as $(string) however that too did not work as the console.log still provides a different output.

Does anyone have any idea to pass a dynamic value into the el attribute value. Any help is greatly appreciated.

Regards, MilindaD

Answer 1

As pointed out by the comment, the el attribute passed in through initializer function can only be a String or jQuery object. Otherwise, Backbone will create an el from it's tagName , className and id attribute.

So in your first scenario, you passed el: "div" and Backbone will then bind the view's el to the first div element in the DOM.

In your second scenario, you passed el: divIdentification and Backbone will set view's el to $(divIdentification) which is not defined in your DOM.

In order for you to set el dynamically. 3 methods

1. assign value of el in the initializer a valid html string, or selector string or just a valid jQuery DOM object.

2. assign className or id attributes to divIdentification in the initializer to allow Backbone view to create its own el

3. Another method is to use setElement here

Answer 2

Your problem is where your create your divIdentification the keyword this in not pointing o your view, try this :

var roomOccupancyView = new Bookings.RoomOccupancyView({
                    model: datas,
                    el: function() {
                    return ".data-identification-" + 
                        this.model.dataTypeId + 
                        "-" + this.model.dataGrouping.get("data1Id") +
                        "-"+this.model.dataGrouping.get("data2Id");
                    } 
                });