JavaScript - синтаксис объекта модуля

Question

Я, кажется, испортил некоторые скобки, запятые, полуколоны. Они выделены как некорректные в Emacs. Я предполагаю, что это не работает. Кажется, я потерялся в фигурных скобках, запятых и полуколонах. Я прокомментировал, какие части краснеют красным цветом, указывая на синтаксические ошибки.

var myGallery = (function() { 
    var s; 

    return { 

     settings: { 
      data: JSON.parse(data), 
     filter: document.getElementById("filter"), 
     gallery: document.getElementById("gallery") 
     }, 

     init: function() { 
      // kick things off 
      s = this.settings; 
     // By default, call the fillImages function with 'all' tag 
     this.createFilters("all"); 
     }, 
     createFilters: function(tag) { 
     // Load the image data 
     // I made imgs global as I couldn't access it from displayImg 
     imgs = this.settings.data.images; 

     // Get image tags and generate a tag array 
     var tags = ["all"]; 

     for(var i = 0; i < Object.keys(imgs).length; i++) { 
     // Check if a tag is already in tags 
     if (tags.indexOf(imgs[i].tag) > -1) { 
      // Yes, it is, so don't add it 
     } else { 
      // No, it isn't, so add it to 'tags' 
      tags.push(imgs[i].tag); 
     } 
     } 
     // Create an unordered list, assign a class to it and append to filter 
     var ul = document.createElement('ul'); 
     ul.classList.add("ul-bare"); 
     this.settings.filter.appendChild(ul); 


     // Iterate over the array and append each element as li 
     for(var i = 0; i < tags.length; i++) { 
     var li=document.createElement('li'); 
     ul.appendChild(li); 
     li.innerHTML=tags[i]; 
     li.onclick = (function(x){ 
      return function() { 
      this.displayImg(tags[x]); 
      })(i); // the first) is highlighted in red 
     } 
    }, // both the curly brace and the comma are highlighed in red 

    displayImg: function(filter) { 
     // Add images to #gallery 
     for(var i = 0; i < Object.keys(imgs).length; i++) { 
     var div = document.createElement("img"); 
     // If the tage is 'all', display all images 
     if (filter === "all") { 
      div.src = imgs[i].src; 
      this.settings.gallery.appendChild(div); 
     } else { 
      // Display only images of certain category (tag argument) 
      if (imgs[i].tag === filter) { 
      div.src = imgs[i].src; 
      this.settings.gallery.appendChild(div); 
      } 

     } 
     } 

     } 
    }; // the semi colon is highlighted in red 
}()); 

myGallery.init(); 

EDIT: Кажется, что все сводится к моему закрытию. После того, как я прокомментировал эту часть, все в порядке:

//li.onclick = (function(x){ 
// return function() { 
// this.displayImg(tags[x]); 
// })(i); 

Edit 2:

Так что я получил следующее:

li.onclick = (function(x) { 
     return function() { 
     console.log(tags[x]); 
     this.displayImg(tags[x]); 
     }; 
    })(i); 

Это работает точно так же, как предполагалось, если я только хочу печатать теги [x], однако, если я добавлю второй оператор this.displayImg ...., то получаю ошибку, что this.displayImg не является функцией.

Просьба сообщить.

спасибо.

Answer 1

// ... 

li.onclick = (function(x){ 
    return (function() { 
     this.displayImg(tags[x]); 
    }) 
})(i); 

// ...