Odoo10 - How to do javascript

Question

I must be doing something completely wrong:

odoo.define('my_module.popups', function (require) {
    'use strict';
    var ajax = require('web.ajax');
    var core = require('web.core');
    var _t = core._t;
    var qweb = core.qweb;
    ajax.loadXML('/my_module/static/xml/templates.xml', qweb);

    var data = {modal_title: 'This is a popup!',modal_body: 'testtest'};
    var p = qweb.render("my_module.popup1_template", data);
    p.prependTo('body');
});

I'm not sure I understand this. The code inside define is never executed. I read many docs and examples, on how to create a Widget etc. But the documentation never explains how do you use/call this stuff that you put inside the 'define'.

I could also just manually create a popup and prepend it to the body element, but I want to do this the odoo way.

Answer 1

I hear you, I think the secrets of Odoo's js framework are the secret weapon a lot of people like to keep to themselves. I am sure it is all completely obvious if you spent the last 4 years working with backbone, requirejs and underscore. Sadly thats not me.

If you take a look at the notification module in /addons/web/static/src/js/widgets/notification.js you should be able to see what they are doing. Some things that might help you are put some logging in to see if your scripts are being loaded and when. For what you are trying to do you will need to provide some events mapping. There is an example in the file I mentioned. In your jsmodule you will create an object which has an events attribute looking something like this.

events: {
    'click .o_close': function(e) {
        e.preventDefault();
        this.destroy(true);
    },
    'hover .my_widget_class': function(e){
        // your code here
    },
},

Do not take the above code literally. You need an event that triggers you widget to be appended to dom at some point.