向在 web.list.Column 的子类中创建的 DOM 元素添加回调

Add callback to DOM element created in subclass of web.list.Column

我正在尝试修改 web_tree_image 小部件。我不希望在列中显示小图像,而是希望在悬停或单击时显示更大的图像。为了实现这一点,我试图在小部件呈现后添加一个回调,方法是覆盖 start 函数,如 the documentation.

中所述

因此,我将以下代码添加到 web_tree_image.js

openerp.web_tree_image = function (instance) {
    instance.web.list.Image = instance.web.list.Column.extend({
        // [...]
        start: function() {
            console.log("start called");
            // [... add callbacks ...]
        },
        // [...]
    });
};

但是,start 函数从未被调用,所以这不起作用。

我还没有完全理解通常导致 start 被调用的代码路径,但它似乎与 web.list.Column.

有所不同

应该调用 start 而我做错了什么吗?或者在创建 DOM 元素后是否有另一种执行代码的方法?

虽然我仍然不知道为什么 start 函数没有被调用,但这是一个解决方法:

openerp.web_tree_image = function (instance) {
    instance.web.list.Image = instance.web.list.Column.extend({
        // ...
        format: function (row_data, options) {
            // ...
            window.setTimeout(function() {
                console.log("DOM ready");
                // ... add callbacks ...
            }, 0);
            // ...
        },
        // ...
    });
};

通过添加到超时为 0 的事件队列,可以推迟执行,直到相关的 DOM 元素按照 here.

的解释创建完毕

根据文档:

The new class can then be used in the following manner:

// Create the instance
var my_widget = new MyWidget(this);
// Render and insert into DOM
my_widget.appendTo(".some-div");

After these two lines have executed (and any promise returned by appendTo() has been resolved if needed), the widget is ready to be used.


Note

the insertion methods will start the widget themselves, and will return the result of start().

If for some reason you do not want to call these methods, you will have to >first call render() on the widget, then insert it into your DOM and start it.