The events orientationchange don't work in backbone

Question

With the event above in backbone I can't detect the orientation. It doesn't work.Are there any alternative to that?By bind an event or something else?Or something is wrong in my code?

var HomeView = Backbone.View.extend({
    template: Handlebars.compile(template),
    events: {
        "click .log_out": "log_out",
        "click .prove": "prove",
        "orientationchange": "onOrientationChange"
    },

    initialize: function () {
        console.log("inhomeview");
        this.render();
    },

    render: function () {
        //var context = JSON.parse(JSON.stringify(this.model));//eliminare
        var context = this.model;
        var html = this.template(context);
        console.log(html);

        $('#pagina').empty();
        $('#pagina').append(this.$el.html(html));

        return this;
    },

    onOrientationChange: function () {
        if (window.orientation === 90 || window.orientation === -90) {
            alert('you are in landscape');
        }
    }
});

refer to http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript — Rachel Gallen, May 12 '13 at 19:24
`onorientationchange` is property of a window object. Now you're trying to apply it to Backbone View. — Samuli Hakoniemi, May 12 '13 at 19:28

Vitalii Petrychuk · Answer 1 · 2013-05-12T20:13:19.093

2

It would work only in case if you set view el to window.

Or you can manually subscribe to the orientationchange event:

initialize : function() {
    $(window).on('orientationchange', this.onOrientationChange);
}

edited May 12 '13 at 20:13

answered May 12 '13 at 19:27

Vitalii Petrychuk

14,035
8
51
55

mmm I'm sorry but what is el and how can i set it to window? – Stefano Maglione May 12 '13 at 19:30
You can read more about `el` in the library documentation http://backbonejs.org/#View-el – Vitalii Petrychuk May 12 '13 at 19:32
Is it ok if i set el: $(window)? – Stefano Maglione May 12 '13 at 19:56
You can set just `window` and Backbone will wrap it into jQuery object. I have updated the answer by adding alternative way. – Vitalii Petrychuk May 12 '13 at 20:14
If i set el to window the function render can't works because it use el as a div.What do you think?Is it possible to first set el to a specific element and after to another to make possible the function of render and orientationchange? – Stefano Maglione May 12 '13 at 21:13
Yes. 1) by simplify html appending `$('#pagina').append(html);` 2) by using http://backbonejs.org/#View-setElement. But I would recommend to use "alternative way" - just add event listener to the `window` inside `initialize` method – Vitalii Petrychuk May 12 '13 at 21:17
I'm new in jqeury:If i use "alternative way" i have to use a trigger function after the on function? – Stefano Maglione May 12 '13 at 21:19
No, this event will be triggered automatically if device orientation will be changed. – Vitalii Petrychuk May 12 '13 at 21:23

The events orientationchange don't work in backbone

1 Answers1