Вызов функции JS из XML

Я хочу вызвать функцию js в Odoo из XML

        <template id = "portal_my_attendances_inherit" name = "My Attendances"
              inherit_id = "hr_attendance_portal.portal_my_attendances">
        <xpath expr = "//t[@t-call='portal.portal_searchbar']" position = "after">
            <div class = "mb4">
                <t t-if = "env.user.employee_id">
                    <a t-if = "env.user.employee_id.attendance_state != 'checked_in'"
                       href = "#" class = "btn btn-success checkInBtn">Check Inn <i class = "fa fa-sign-in"/></a>
                    <t t-else = "">
                        <a href = "#" class = "btn btn-warning checkOutBtn">Check Out <i class = "fa fa-sign-out"/></a>
                        <strong> Hours today:</strong>
                        <span t-field = "env.user.employee_ids.hours_today" t-options = "{'widget': 'float_time'}"/>
                        <small>(refresh page to update)</small>
                    </t>
                </t>
            </div>
        </xpath>
    </template>
    /** @odoo-module **/

import publicWidget from '@web/legacy/js/public/public_widget';
console.info('Start ...');

publicWidget.registry.portalAttendance = publicWidget.Widget.extend({
        selector: '.checkInBtn, .checkOutBtn',

        events: {
            'click .checkInBtn': '_onCheckInClicked',
            'click .checkOutBtn': '_onCheckOutClicked',
        },

        _onCheckInClicked: function (ev) {
            ev.preventDefault();
            console.info('In Button clicked !!!');
        },

        _onCheckOutClicked: function (ev) {
            ev.preventDefault();
            console.info('Out Button clicked !!!');
        },

    });

export default publicWidget.registry.portalAttendance;

В консоли печатается «Начать...», но когда я нажимаю кнопку «Проверить», я не получаю 'В кнопке нажата!!!' сообщение. Может кто-нибудь мне помочь, пожалуйста.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
160
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Селектор должен быть родительским для элементов события, поэтому вам следует его обновить.

В элемент <div class = "mb4">, заключающий в себе элемент события, теперь добавлен новый класс под названием wrap-div.

<template id = "portal_my_attendances_inherit" name = "My Attendances" inherit_id = "hr_attendance_portal.portal_my_attendances">
    <xpath expr = "//t[@t-call='portal.portal_searchbar']" position = "after">
        <div class = "mb4 wrap-div">
            <t t-if = "env.user.employee_id">
                <a t-if = "env.user.employee_id.attendance_state != 'checked_in'" href = "#" class = "btn btn-success checkInBtn">Check Inn <i class = "fa fa-sign-in"/></a>
                <t t-else = "">
                    <a href = "#" class = "btn btn-warning checkOutBtn">Check Out <i class = "fa fa-sign-out"/></a>
                    <strong> Hours today:</strong>
                    <span t-field = "env.user.employee_ids.hours_today" t-options = "{'widget': 'float_time'}" />
                    <small>(refresh page to update)</small>
                </t>
            </t>
        </div>
    </xpath>
</template>

Затем,

selector: '.wrap-div',

Другие вопросы по теме