javascript - Odoo 网络客户端。无法使用 jquery 选择器选择 html 元素

Question

以下引用Odoo v9企业版。

任务:从主菜单 -> 时间表打开时间表表单时，在“详细信息”选项卡上发送 .click() 事件，以便打开详细信息选项卡。

问题:当我使用选择器选择元素时，我没有得到任何返回。 (我已经确认我使用的选择器对于我感兴趣的 dom 元素是正确的)

根据odoo Web客户端的官方文档，我扩展了web.FormView小部件，并覆盖了它的start方法。通过查看示例，在我看来，当调用 start 方法时，DOM 已经被渲染了。

当我在 start 方法中使用 console.log(this) 时，我可以在 $el 变量中看到一个具有 DOM 的对象。

我尝试使用 jquery 选择器进行选择，但无法获取我的对象。

我的自定义小部件js:

odoo.define('t9397.form_override', function(require) {
    "use strict";
    var core = require('web.core');
    var web_widget = require('web.FormView')

    var FormWidgetOverride = web_widget.extend({

    start : function(record) {
        console.log('overridden')
        console.log(this)
        this.$("a[data-toggle='tab']:contains('Details')").click()
        $("a[data-toggle='tab']:contains('Details')").click()// trying both
        return this._super()

        }
    })
    core.view_registry.add('form', FormWidgetOverride);
});

我想要将点击事件发送到的 DOM 对象:

< a data-toggle="tab" disable_anchor="true" role="tab" href="#notebook_page_22">Details< /a >

我对 Promise、Jquery，尤其是 odoo 的 Web 客户端的了解相当有限。任何帮助将不胜感激。

Answer 1

start() 可能会执行包含异步过程的渲染任务，因此有必要等待它完成执行。根据documentation :

A widget is not guaranteed to work correctly until its start() method has finished executing. The widget's parent/creator must wait for a widget to be fully started before interacting with it.

正常情况下，start 应该返回 Deferred() jQuery object ，如果 start() 本身在 super 中正确实现，那么您可以使用从其调用接收到的 Deferred 对象来等待它:

第一个用于您的简单代码的案例:

start : function() {
    var sup_ready = this._super();
    sup_ready.done(function(){
        //your code:
        console.log('overridden');
        console.log(this);
        this.$("a[data-toggle='tab']:contains('Details')").click();
        $("a[data-toggle='tab']:contains('Details')").click(); // trying both
    });
    return $.when( sup_ready );
    }
});

第二种情况，用于异步过程和更复杂的代码:

start : function() {
    var sup_ready = this._super();
    var me_ready = $.Deferred();
    . . .
    sup_ready.done(function(){
        . . .
        . . .
        //finally Resolve or Reject your deferred object:
        //Resovle:
        me_ready.resolve(); //use it if all go ok
        // *OR* Reject (in case something go wong) to indicate failure:
//      me_ready.reject();
    });
    . . . 
    return $.when( sup_ready, me_ready );
});

请注意，我将 me_ready.resolve() 放在 sup_ready.done() 内，但这并不是绝对必要的，一般来说，它可能是其他方式，即您可以在此 sup_ready.done() 之外拒绝或解析 me_ready，您可以在代码中的任何位置解析或拒绝 me_ready 延迟对象。

 

上面的第二种情况不适用于您当前的问题，但这是将来需要避免的陷阱，以防万一。

 

作为您选择的 start() 方式的替代，还可以考虑 events property小部件并检查您是否可以将其应用到您的案例中...