Javascript-код не работает в odoo.define, но работает в консоли разработчика

Question

Как на картинке внизу,
Я хочу изменить цвет фона при изменении значения радио.

это для ODOO11. Я установил файл js для шаблона для наследования. но это не работает.

<template id="assets_backend_weight" name="static_resources_demo assets" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/yc_root/static/src/js/my_js.js"></script>
    </xpath>
</template>

my_js.js

odoo.define('yc_root.my_JS', function (require) {"use strict";
    var Class = require('web.Class');
    var hpw = Class.extend({
    init: function(){
        var v = $("div[name='in_out'] div input:checked").attr('data-value');
        if (v =='O') {
            $('.o_form_sheet').css("background-color","blue");
            }
        else {
            $('.o_form_sheet').css("background-color","yellow");
            }
        }
    })
    return hpw;
});

Я поместил код из переменной v в конец условия if-else в консоли разработчика. Это может изменить цвет, но не работает в пути через настроенный файл JS. Как я могу изменить это?

И я уверен, что мой настроенный файл JS взят odoo. Пока я просто помещаю console.log('hi') в свой настроенный файл JS, он может появиться на консоли.

Перед генерацией DOM, похоже, стоит загрузить web.assets_backend.js. Потому что я тестирую оповещение («привет»), всплывающее окно перед загрузкой DOM (экран полностью пустой).

Answer 1

Я нашел решение.
- нажмите радио, чтобы изменить bgcolor

• реализовать изменение bgcolor при загрузке DOM в записи другого типа.

мой код

odoo.define('yc_root.my_JS', function (require) {"use strict";
    var core = require('web.core');
    var Widget = require('web.Widget');

    var bgdrawer = Widget.extend({
        /* <init: construct before loading DOM completely.>*/
        init: function() {
            var self = this;
            self._super.apply(this, arguments);
             //self.bgChanger();
             /*  this is used to register a listener on an event.
                  form: .on(ev, node.callback, node.context);
                   ev:
                      'resize': implement when browser resize
                      'DOM_updated': implement when DOM updated
                      ...etc.                                      */
             core.bus.on('click', "div[name='in_out'] div input:checked", self.bgChanger);
             core.bus.on('DOM_updated', "span[name='in_out']", self.post_bgChanger);
             core.bus.on('click', "button .o_pager_next", self.post_bgChanger);
        },
        bgChanger: function() {
            var v = $("div[name='in_out'] div input:checked").attr('data-value');
            if (v =='O') { $('.o_form_sheet').css("background-color","#adff2f");}
            else if(v =='I') { $('.o_form_sheet').css("background-color","#ffc0cb");}
        },
        post_bgChanger: function() {
            if ($("span[name='in_out']")[0]){
                var _str = $("span[name='in_out']")[0].innerHTML;
                if (_str=="出貨") { $('.o_form_sheet').css("background-color","#adff2f");}
                else if(_str=="進貨") { $('.o_form_sheet').css("background-color","#ffc0cb");}
            }
        },
    });

    // Init a new bgdrawer when the web client is ready
    /*core.bus.on('web_client_ready', null, function () {new bgdrawer();});
    return {'bgdrawer': bgdrawer,};*/

    var my_widget = new bgdrawer(this);
    my_widget.appendTo($(".o_form_sheet"));

});