Question

I am using mobiscroll with underscore. I have an underscore template. I need to do the .scroller on an element added from the template.

Here is the template:

<form>
    <input type="text" id="startdate" name="startdate"/>
</form>

Here is the render function in the view:

var MyView = Backbone.View.extend({
    template: render('auctioncreate'),
    render: function() {
        this.$el.empty().append(this.template);
        $('#startdate').scroller();  // this does not work
    }
});

render is a function that loads the html and makes it into a template. For completeness, here is the code for the render function:

function render(tn, td) {
    if(!render.tc) {
        render.tc = {};
    }
    if(! render.tc[tn]) {
        var td = 'assets/js/templates';
        var tu = td + "/" + tn + ".html";
        var ts;
        $.ajax({
            url: tu,
            method: 'GET',
            async: false,
            dataType: 'html',
            success: function(d) {
                ts = d;
            },
            error: function(e) {
            }
        });
        render.tc[tn] = ts;
    }
    return _.template(render.tc[tn]);
}

I have tried adding a ondomready javascript in the template itself. It does not work straight away, but it does work after a refresh?!

$(function() {
    $('#startdate').scroller(); // this work if I refresh once.
});

Basically I need to apply the datetime picker on the element after it gets appended to the dom.

Answer 1

The error was in the render function of the View.

Instead of:

$('#startdate')...

It should have been:

this.$('#startdate')...