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 之前，odoo 似乎加载了 web.assets_backend.js。因为我测试alert('hi'), 它在加载前弹出 DOM（屏幕完全空白）。

Answer 1

我找到了解决方案。
- 单击单选按钮更改 bgcolor

在不同类型的记录中加载 DOM 时实现 bgcolor 更改。

我的代码

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"));

});

Javascript 代码在 odoo.define 中不起作用，但在开发人员控制台中有效

Javascript code doesn't work in odoo.define but works in developer console

javascript

odoo-11