javascript - 未捕获的类型错误 : Cannot read property 'style' of null/Oracle JET

Question

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

我正在尝试在我的项目( 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();
 }
);

感谢您的帮助

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 之间的绑定(bind)完成后会自动调用。

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

附注不要忘记应用说明书中的 CSS。