Gestión de parámetros

Supongamos que nuestro plugin acepta en su método constructor uno o varios parámetros que necesita usar internamente, o en su vista/template. Por ejemplo, que muestre en un selector html una serie de escalas pasadas al plugin:

const myPlugin = new M.plugin.miplugin({
      "escalas": [{
          "valor": "1250000",
          "numero": "1.000.000"
        }, {
          "valor": "1000000",
          "numero": "800.000"
        }, {
          "valor": "625000",
          "numero": "500.000"
        }
      });

Los parámetros que recibe están en formato json. En este caso, consiste en un array 'escalas' de tuplas 'valor/numero'. En el método constructor del plugin, necesitamos por tanto declarar este parámetro, que podremos guardar en el atributo correspondiente:

// facade/js/miplugin.js
constructor(params) {
   super();
   this.escalas_ = params.escalas;
});

addTo(map) {
   // Pasamos el parametro al control
   let miControl = new M.control.mipluginControl(this.escalas_);
...

// facade/js/mipluginControl.js
constructor(scales) 
{
...
     this.escalas_ = scales;
...

Y en el método createView del control, que es cuando se procesa el template, se le pueden pasar los parámetros a través de la propiedad vars, que son accedidos mediante notación Handlebars.

// facade/js/mipluginControl.js
createView(map) {
  let this_ = this;    
  let promise = new Promise((success, fail) => {
    M.template.compile('miplugin.html', {
      'vars': {
        'escalas': this_.escalas_
      }
    }).then(function(html) {
      this_.addEvents(html);
      success(html);
    });   
  });
  return promise;
}

💡 Estamos lanzando la compilación de la plantilla como Promise ya que queremos asociar eventos a la misma, y para ello debemos esperar a que esté compilada.

De esta manera, en la propia plantilla podremos acceder al parámetro tratándolo como el objeto json que es. En este caso, queremos que un selector html contenga una opción de selección 'option' por cada posible escala que ha recibido el constructor:

<!--template/miplugin.html-->
<div class="m-scaleSelector-container" id="miplugin-container">
  <div>Escala = 1 :
    <select id="SelectEscala" class="m-scaleSelector-select">
      {{#each escalas}}
      <option value="{{valor}}">{{numero}}</option>
      {{/each}}
    </select>
  </div>   
</div>