Uncaught TypeError: Невозможно прочитать свойство 'style' для null / Oracle JET

Question

Здравствуйте, я новичок в JS и Oracle JET Framework.

Я пытаюсь внедрить элемент Panel Expand / Collapse в моем проекте (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',«нокаут», «jquery», «ojs / ojknockout», «обещание», «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.

Подробнее о всех внутренних методах можно прочитать здесь .

PS donне забудьте также применить CSS из поваренной книги.