javascript - 未捕获的TypeError:无法读取null的属性'style'/Oracle JET

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

我正在尝试在我的项目（http://www.oracle.com/webfolder/technetwork/jet-310/jetCookbook.html?component=animation&demo=panelExpand）中实现面板扩展/折叠项，但出现此错误，我不知道为什么要遵循食谱。这是我的代码：

我的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

define（[['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();
 }
);

感谢您的帮助

最佳答案

这是因为涉及这些行时，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的更多信息。

附言不要忘记从食谱中应用CSS。