Uncaught TypeError: Cannot read property 'style' of null / Oracle JET

Question

您好，我是 JS 和 Oracle JET Framework 的初学者。

我正在尝试在我的项目 (http://www.oracle.com/webfolder/technetwork/jet-310/jetCookbook.html?component=animation&demo=panelExpand) 中实现一个 Panel Expand/Collapse 项，但我遇到了这个错误我不知道为什么我遵循了食谱。这是我的代码：

我的HTML：

<div id="animationDemo">

    <div id="panel" class="oj-panel oj-margin basepanel">
      <h3>Panel Expand/Collapse Demo</h3>
      <div>Primary Content</div>
      <div id="extra-content" class="oj-panel oj-panel-alt2 childpanel">Extra Content</div>
      <button class="oj-panel-resize-button" 
              data-bind="click: buttonClick,
                         ojComponent: {component: 'ojButton', 
                                       chroming: 'half',
                                       display: 'icons', 
                                       icons: buttonIcons, 
                                       label: buttonLabel}"></button>
   </div>

</div>

我的 JS

定义(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'promise'、'ojs/ojtable'、'ojs/ojarraytabledatasource'、'ojs/ojbutton'、'ojs/ojanimation']、函数（oj，ko，$）{

function CustomerViewModel() {
  var self = this;

  ////

  var panel = document.getElementById('panel');
  var extra = document.getElementById('extra-content');  
  var initHeight = $(panel).css('height');

  // Keep track of whether the element is expanded
  self.expanded = false;
  self.buttonIcons = ko.observable({end:'oj-panel-expand-icon'});
  self.buttonLabel = ko.observable('expand');

  self.buttonClick = function() {
    if (self.expanded) {
      // Call the collapse method, then hide the extra content when animation ends.
      oj.AnimationUtils['collapse'](panel, {'endMaxHeight': initHeight}).then(function() {
        extra.style.display = 'none';
        self.expanded = false;
        self.buttonIcons({end:'oj-panel-expand-icon'});
        self.buttonLabel('expand');
      });
    } else {
      // Mark the extra content to be displayed, followed by a call to the expand method.
      extra.style.display = 'block';
      oj.AnimationUtils['expand'](panel, {'startMaxHeight': initHeight}).then(function() {
        self.expanded = true;
        self.buttonIcons({end:'oj-panel-collapse-icon'});
        self.buttonLabel('collapse');
      });
    }
  };
  ///


  self.connected = function() {
    // Implement if needed
  };

  self.disconnected = function() {
    // Implement if needed
  };

  self.transitionCompleted = function() {
  };

  self.hello2 = function() {
    alert('hhhh');
  };
}


return new CustomerViewModel();
 }
);

感谢您的帮助

Answer 1

因为 HTML 还没有加载这些行:

var panel = document.getElementById('panel');
var extra = document.getElementById('extra-content');  
var initHeight = $(panel).css('height');

因此它们的值变为空值。

相反，您可以仅在使用 jQuery 加载文档后调用它们，如下所示：

var panel;
var extra;
var initHeight;

$(document).ready(function(){
    panel = document.getElementById('panel');
    extra = document.getElementById('extra-content');
    initHeight = $(panel).css('height');
});

或者，如果您想以纯粹的 OJET 方式进行操作，您可以这样做：

var panel;
var extra;
var initHeight;

self.handleBindingsApplied = function(){ 
    panel = document.getElementById('panel');
    extra = document.getElementById('extra-content');
    initHeight = $(panel).css('height');
};

self.handleBindingsApplied 是 OJET Viewmodel 的内部方法，在 HTML 和 Viewmodel 之间的绑定完成后自动调用。

您可以阅读有关所有内部方法的更多信息here。

P.S。不要忘记应用食谱中的 CSS。

Uncaught TypeError: Cannot read property 'style' of null / Oracle JET

Uncaught TypeError: Cannot read property 'style' of null / Oracle JET

javascript

oracle-jet

我的HTML：

我的 JS