javascript - 尝试在 odoo 表单小部件中显示棋盘 js，没有错误，没有棋子

Question

嗨，我想展示chessboardjs在odoo后端的表单 View 上，我最终制作了小部件来显示板，但是这些部件被隐藏了，我不知道为什么，因为除了部件之外，似乎工作正常。如果我在选项中使用 dragable : true 并移动隐藏的棋子，那么棋盘将与所有棋子一起渲染。我是否在我的代码中遗漏了一些东西，即棋盘渲染得不好？ 这是mi小部件代码:

(function (instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;

    openerp.chess_base = function (instance, local) {

        local.YourWidgetClassName = instance.web.form.FormWidget.extend({
            start: function () {
                this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>'); // creating the board in the DOM
                this.onBoard();
            },
            onBoard: function (position, orientation) {
                if (!position) {
                    this.position = 'start'
                } else {
                    this.position = position
                }
                if (!orientation) {
                    this.orientation = 'white'
                } else {
                    this.orientation = orientation
                }
                this.el_board = this.$('#board');
                this.cfg = {
                    position: this.position,
                    orientation: this.orientation,
                    draggable: false,
                    pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
                };
                this.board = ChessBoard(this.el_board, this.cfg);
            }
        });

        instance.web.form.custom_widgets.add('widget_tag_name', 'instance.chess_base.YourWidgetClassName');
    }
})(openerp);

Answer 1

我不知道为什么，但这解决了问题，如果有人向我解释请......

(function (instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;

    openerp.chess_base = function (instance, local) {

        local.ShowBoard = instance.web.form.FormWidget.extend({
            start: function () {
                this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>');
                this.show_board();
            },
            show_board: function () {
                var Game = new instance.web.Model("chess.game"),
                    record_id = this.field_manager.datarecord.id,
                    record_name = this.field_manager.datarecord.name,
                    self = this;
                    self.el_board = self.$('#board');

                Game.query(['pgn']).filter([['id', '=', record_id], ['name', '=', record_name]]).all().then(function (data) {
                    console.log(data);
                    self.cfg = {
                        position: data[0].pgn,
                        orientation: 'white',
                        pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
                    };
                    ChessBoard(self.el_board, self.cfg);
                });
            }
        });

        instance.web.form.custom_widgets.add('board', 'instance.chess_base.ShowBoard');
    }
})(openerp);