自定义组件注册javascript。。获取奇怪的未捕获类型错误

我正在开发一个新的模板。它包含一个名为panel actions的api。它允许在引导面板上创建动作图标。我想动态加载这些面板。我的意思是，在完成页面加载后，我想用这些操作添加新的面板。但是当我这样做时，会出现错误

     $.components.register("panel", {
  api: function() {
    $(document).on('click.site.panel', '[data-toggle="panel-fullscreen"]', function(e) {
      e.preventDefault();
      var $this = $(this),
        $panel = $this.closest('.panel');

      var api = $panel.data('panel-api');
      api.toggleFullscreen();
    });});

这是javascript中的how panel api。下面是html中的panel

<div class="panel is-collapse">
            <div class="panel-heading">
              <h3 class="panel-title">Panel With Tool</h3>
              <div class="panel-actions">
                <div class="dropdown">
                  <a class="dropdown-toggle panel-action" data-toggle="dropdown" href="#" aria-expanded="false"><i class="icon wb-settings" aria-hidden="true"></i></a>
                  <ul class="dropdown-menu bullet" role="menu">
                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-flag" aria-hidden="true"></i> Action</a></li>
                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-print" aria-hidden="true"></i> Another action</a></li>
                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-heart" aria-hidden="true"></i> Something else here</a></li>
                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-share" aria-hidden="true"></i> Separated link</a></li>
                  </ul>
                </div>
                <a class="panel-action icon wb-refresh" data-toggle="panel-refresh" data-load-type="round-circle" data-load-callback="customRefreshCallback" aria-hidden="true"></a>
                <a class="panel-action icon wb-plus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
                <a class="panel-action icon wb-expand" data-toggle="panel-fullscreen" aria-hidden="true"></a>
                <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
              </div>
            </div>
            <div class="panel-body">

            </div>
          </div>

带工具的面板

当我动态加载这些时，会出现一个错误，即“未定义”

---

例如：

未捕获类型错误：无法读取未定义的属性“toggleFullscreen”

首先，

面板api

未在任何组件的html中定义。其次，您只是获取属性，而不是加载库，因此

toggleFullscreen

不会作为调用存在。看起来你错过了一个中间步骤