IDs dynamics nas ligações de valor do Customizer do WordPress

Estou tentando criar ligações do Customizer do WordPress com base em IDs dynamics, assim

for (var i=0; i < myarray.length; i++) { wp.customize( 'custom_width_'+ myarray[i], function( value ) { value.bind( function( to ) { $( '#'+myarray[i] ).css( 'min-width', to ); }); }); } 

O código é uma coisa que eu roubei do tema de vinte e dezessete (customize-preview.js), em seguida, envolto em um loop

O problema é que myarray [] está sendo aniquilado dentro de wp.customize ()

Os especialistas em Javascript se divertiriam ao saber que passei horas tentando resolver isso.

Eu sei que eu poderia … (kludge alert) armazenar a ID temporariamente no DOM, mas há, sem dúvida, uma maneira melhor.

Solutions Collecting From Web of "IDs dynamics nas ligações de valor do Customizer do WordPress"

O problema que você está enfrentando é causado pelo fato de que você está usando a mesma variável i dentro do escopo completo do snippet.

Inicialmente, você está concatenando a variável com ‘custom_width_’ como uma string, que está correta. No momento da concatenação, i tenho o valor correto, o que significa que o ID de configuração que você precisa é gerado corretamente.

Quando o ciclo está concluído, i conto o índice do último elemento em sua matriz e é exatamente isso que o confunde, já que '#'+myarray[i] sempre apontará para o último elemento da matriz. A razão para isso é que o retorno de chamada para a alteração da configuração do customizador é asynchronous. Isso significa que mesmo que a function pareça estar dentro do loop (fisicamente), na verdade não é executada na mesma ordem.

Para evitar o problema, você precisa declarar um escopo diferente para a variável, onde não seria mutado pelo loop. A maneira mais simples de fazer isso é apresentar o escopo por uma nova function anônima como esta:

 for (var i=0; i < myarray.length; i++) { (function( i ) { wp.customize( 'custom_width_'+ myarray[i], function( value ) { value.bind( function( to ) { $( '#'+myarray[i] ).css( 'min-width', to ); }); }); })( i ); } 

Uma vez que i não é um object, quando você o usa como parâmetro para uma function, seu valor será copiado em vez de dado como referência, permitindo assim que você modifique o original sem afetar o clone / cópia.

Uma maneira um pouco melhor de fazê-lo seria usar o método de jQuery para o loop:

 $.each( myarray, function( i, id ) { wp.customize( 'custom_width_' + id, function( setting ) { setting.bind( function( value ) { $( '#' + id ).css( 'min-width', value ); }); }); }); 

Espero que isso resolva seu problema e responda sua pergunta.