Dois Arrays com Template String

No caso sua função template só pode receber um parâmetro e não dois. Se quiser fazer funcionar dessa forma, você precisa passar um objeto JavaScript que contenham duas propriedades, uma para o array X e outra para o array Y. Sendo assim, você estará respeitando a assinatura do método template e por conseguinte o método update. No entanto, isso não resolverá seu problema.

Você precisa passar para a função update() a lista já do jeito que deseja com as combinações. Seu template jamais deveria ter a lógica que faz isso, ele só serve para exibir uma estrutura de dados pronta, que outra classe já criou mastigado para ela.

No máximo que você faz no template é iterar para criar cada elemento.

Então, é recorrer a boa e velha lógica de programação para passar os dados do jeito que você deseja para a função update.

Abraço cangaceiro!

Marcelo, uma forma de fazer isso, é utilizar o índice do array de tamanhos para pegar a relação no de cores.

Mas para isso, não sei fazer usando arrow function, pois precisamos de dois parâmetros no callback do map.

Alterei e testei seu código e funcionou.

Veja como fica:

class GradeView {

    constructor(base) {

        this.templateBase = base ;



    }


    template(cores,tamanhos) {

        return `<table >
                            <tr>
                              <th class="tb_grade">Opções</th>
                              <th class="tb_grade">Estoque</th>
                              <th class="tb_grade">Min Estoque</th>
                              <th class="tb_grade">Status</th>
                              <th class="tb_grade">Codigos de Barras</th>
                              <th class="tb_grade"></th>
                              <th class="tb_grade"></th>
                            </tr>


                            ${tamanhos.map(function( n, index ){
                              return `<tr>
                                        <td class="tb_grade tb_opcoes">${n} - ${cores[index]}</td>
                                      </tr>`
                            }).join('')}


                </table>`



    }

    update(cores,tamanhos){


            this.templateBase.html(this.template(cores,tamanhos));




    }


}

O único detalhe, é abrir mão da arrow function.

Galera Muito Obrigado.

Adriano muito obrigado sua resposta deu certo aqui, vlw mesmo.

Flavio muito obrigado, estou sempre separando conforme citado por você , para sempre manter o padrão , vlw pela dica .

Abraços :)