Mustache.js with backbone.js not rendering in the correct div

Question

I'm using backbone.js with Mustache as a template engine, one of my backbone views do miscellaneous functions, one of which is rendering a drop-down list with items fetched from database. the items are fetched using Ajax, the function takes two parameters, the database table name, and the div id on which the list is going to be rendered.

The backbone view:

MiscFunctionsView = GenericView.extend({
template: "dropdownList-template.html",
initialize:function(){
    this.constructor.__super__.initialize.call(this);
},
drawDropDownList: function(tableName,divId){
    this.$el=$("#"+divId);
    console.log(this.$el);
    var that = this;
    $.ajax({
        url: this.basePath + "misc.php",
        type:"post",
        data:{
            ac:"ddl",
            table_name: tableName
        },
        success:function(res){
            that.handleResponse(res);
        }
    });
}
});

P.S. the handelResponse() and render() functions are defined in the GenericModel, trying to minimize the amount of code in the question,if they are needed tell me.

The html page:

<form id="searchForm">

    <div id="occupation">

    </div>
    <div id="p-type">

    </div>
    <div id="a-type">

    </div>
</form>
<script type="text/javascript">
    $(function(){
        var misc = new MiscFunctionsView();
        misc.drawDropDownList("occupation","occupation");
        misc.drawDropDownList("person_type","p-type");
        misc.drawDropDownList("account_type","a-type");
    });
</script>

the page after loading:

<form id="searchForm">

    <div id="ddl">

    </div>
    <div id="search-results">
        <select name="account_type" id="account_type-ddl">
            <option value="1">Developer</option>
            <option value="2">Free Individual</option>
            <option value="3">Premium individual</option>
        </select>
        <select name="occupation" id="occupation-ddl">
            <option value="1">Actor</option>
            <option value="2">Director</option>
           <option value="3">Producer</option>
        </select>
        <select name="person_type" id="person_type-ddl">
            <option value="1">Established</option>
            <option value="2">Upcoming</option>
            <option value="3">Corporate</option>
        </select>
    </div>
    <div id="results">

    </div>
</form>

You can see that all of the drop-down lists got rendered in the same div, and this is arbitrary, meaning if I reload the page they could render in a different div, but all three of them are in the same one. Even though logging the this.$el before rendering shows that the correct div is in the object indeed.

I thought it might has something to do with Ajax, so tried async:false in the Ajax call but the same thing happened.

Any thoughts?

mu is too short mu is too short · Accepted Answer · 2013-08-19T18:01:44

I'd guess that handleResponse and render are going to be doing things to this.$el. One problem is that this.$el changes every time you call drawDropDownList so all three drawDropDownList calls will end up using the same this.$el.

Another problem is that you should never assign to $el or el directly, you should only using setElement to change the view's element, setElement will make sure that $el and el agree and it will rebind the events.

I really don't see why MiscFunctionsView is a view at all, it looks more like a pile of utility methods that a view. A view is generally a chunk of the user interface that is attached to a single DOM element. A view for #searchForm or perhaps one view for each of the <div>s inside #searchForm would make more sense. Then your drawDropDownList would just be a utility mixin method sort of like this:

drawDropDownList: function(tableName, divId) {
    var $div = $('#' + divId);
    $.ajax({
        url: this.basePath + 'misc.php',
        type: 'post',
        data: {
            ac: 'ddl',
            table_name: tableName
        },
        success:function(res) {
            // Render the `<select>`s into `$div` here and leave `that.$el` alone
        }
    });
}

Mustache.js with backbone.js not rendering in the correct div

1 Answers