Al hacer clic en el botón, tengo que cambiar el ancho de CSS:
{{#if this.text}} <div id = {{this.id}} class="sidepanel"> <button class="closebtn" onclick="{{close(this)}}">×</button> <h1> {{this.text}}</h1> </div> <button onclick="{{open(this)}}" class="openbtn">Open</button> {{/if}}dentro del archivo de script tengo dos funciones:
function close(data) { document.getElementById(data.id).style.width = "0px" } function open(data) { document.getElementById(data.id).style.width = "100%" }Problema: no estoy seguro de cómo llamar a estas funciones desde la plantilla del manillar
open y close no están disponibles para el contexto de Handlebars, por lo que definitivamente no queremos invocarlos desde dentro de las expresiones de handlebars {{ }} .
La parte de estas invocaciones que Handlebars conoce es el id , por lo que lo más sencillo sería representar el id para que se pase a la función cuando se haga clic en el botón al que está conectado.
Nota: voy a cambiar el nombre de estas funciones de open y close a openSidepanel y closeSidepanel porque open es una función existente en la window .
Nuestras definiciones de funciones se convierten en:
function closeSidepanel(id) { document.getElementById(id).style.width = "0px" } function openSidepanel(id) { document.getElementById(id).style.width = "100%" }y nuestra plantilla se convierte en:
<div id = {{this.id}} class="sidepanel"> <button class="closebtn" onclick="closeSidepanel('{{this.id}}')">×</button> <h1> {{this.text}}</h1> </div> <button onclick="openSidepanel('{{this.id}}')" class="openbtn">Open</button> Tenga en cuenta que envolvemos entre comillas lo que se representa para nuestra id para que se trate como una cadena de JavaScript.
He creado un violín para su referencia.