squirrellyjs / squirrelly

Semi-embedded JS template engine that supports helpers, filters, partials, and template inheritance. 4KB minzipped, written in TypeScript ⛺
https://squirrelly.js.org
MIT License
555 stars 81 forks source link

Cannot get Basic Browser Example to fire, JSFiddle included #261

Closed randy-johnson closed 6 months ago

randy-johnson commented 6 months ago

I have been trying for awhile to get a basic example working in the browser.

I keep getting a project_id is undefined error.

Here is the JSFiddle: https://jsfiddle.net/5q4t8bsk/

Here is the code

<script src="https://unpkg.com/squirrelly"></script>
let project_card = "<div>Project ID: {{project_id}}</div>"; // Define a template with a placeholder for project_id

    let data = [
      {
        project_id: "100",
      },
    ];

    let projectsHTML = "";

    data.forEach((project) => {
      console.log("Project:", project);
      projectsHTML += Sqrl.render(project_card, project); // Render template with each data object
    });

    console.log(projectsHTML);

I also stripped it down to a 1 liner with the same error:

      console.log(
      Sqrl.render("<div>Project ID: {{project_id}}</div>", {project_id:32}) //
      );  
VM523:3 Uncaught ReferenceError: project_id is not defined
    at eval (eval at O (squirrelly:1:8740), <anonymous>:3:52)
    at e.render (squirrelly:1:9349)
    at _display/?editor_console=true:116:12

Any ideas on what I am doing wrong?

randy-johnson commented 6 months ago

Looks like all it was is that I didn't add it. in front of the variable in the template. it.project_id

All Good now.