Search code examples
javascriptreactjsjavascript-objectsbind

how can i use ONLY bind instead of call when Iterating a NodeList using forEach?


I am new to programming in Javascript .so please explain me can I use binding here.This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.

var menu = (function() {

      function initiate() {
        //[].slice.call I used by using call but i want to to by binding and I am not able to do.
        [].slice.bind(null, document.querySelectorAll('.menu')).forEach(function(element, i) {

            var titleclick = el.querySelector('div.d-striker'),
              striker.addEventListener('click', function(event) {
                if (!open) {
                  el.className += ' dr-menu-open';
                  open = true;
                }
              }, false);

            icon.addEventListener('click', function(event) {
              if (open) {
                event.stopPropagation();
                open = false;
                el.className = el.className.replace(/\bdr-menu-open\b/, '');
                return false;
              }
            }, false);
          }

          initiate();

        })();
<div class="side">
  <nav class="menu">
    <div class="d-striker">
      <span class="d-icon dr-icon-menu"></span><a class="dr-label">Account</a>
    </div>
    <ul>
      <li><a class="d-icon dr-icon-user" href="#">icon</a></li>
      <li><a class="d-icon dr-icon-cam" href="#">Videos</a></li>

      <li><a class="d-icon dr-icon-download" href="#">Downloads</a></li>
      <li><a class="d-icon dr-icon-settings" href="#">Settings</a></li>
    </ul>
  </nav>
</div>


Solution

  • bind() returns a bound function, but you need to call that function to get the array that's needed for forEach. Add parentheses to call the function.

    [].slice.bind(null, document.querySelectorAll('.menu'))().forEach(function(element, i) {
                                                           ^^