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文件中，但它可以出现在控制台上。

似乎odoo在生成DOM之前先加载web.assets_backend.js。 因为我测试了警报（“ hi”）， 加载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"));

});