{"id":15402207,"url":"https://github.com/liby99/jquery-template","last_synced_at":"2026-01-28T00:04:31.129Z","repository":{"id":90735954,"uuid":"112701728","full_name":"Liby99/jquery-template","owner":"Liby99","description":"Simple and robust jQuery template plugin for front-end rendering","archived":false,"fork":false,"pushed_at":"2017-12-01T08:48:46.000Z","size":53,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T01:39:26.343Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Liby99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-01T06:07:59.000Z","updated_at":"2017-12-01T08:29:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"6670e582-bd25-4306-8f72-8a611f1edd38","html_url":"https://github.com/Liby99/jquery-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Liby99/jquery-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fjquery-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fjquery-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fjquery-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fjquery-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Liby99","download_url":"https://codeload.github.com/Liby99/jquery-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fjquery-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28828176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T23:29:49.665Z","status":"ssl_error","status_checked_at":"2026-01-27T23:25:58.379Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T16:01:53.771Z","updated_at":"2026-01-28T00:04:31.086Z","avatar_url":"https://github.com/Liby99.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JQuery Template\n\n## Introduction\n\njQuery Template is a simple yet robust front-end templating plugin for jQuery,\nsupporting any JavaScript Syntax, function calling, list rendering, template\nnesting and lot more.\n\n## Download \u0026 Installation\n\nDownload `/src/jquery-template.js` to your website `/js` directory, and\nimport it in your html file by\n\n```html\n\u003cscript src=\"/js/jquery-template.js\"\u003e\u003c/script\u003e\n```\n\nIt will be ready to use!\n\n## Getting Started\n\nPrior to the use of this plugin, you need:\n\n1. A HTML5 supported Template with name `hello`:\n\n    ``` html\n    \u003ctemplate name=\"hello\"\u003e\n        \u003cdiv data-id=\"data.id\"\u003e\n            \u003cp\u003e\n                Hello, \u003cspan data-text=\"data.name\"\u003e\u003c/span\u003e\n            \u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/template\u003e\n    ```\n\n2. A JSON Format Data:\n\n    ``` js\n    var data = {\n        id: \"a93e1cff0da\",\n        name: \"John Doe\"\n    }\n    ```\n\nThen in the front-end, rendering is as easy as:\n\n``` js\n$(\"#container\").render(\"hello\", data);\n```\n\nThe result will then be\n\n``` html\n\u003cdiv id=\"container\"\u003e\n    \u003cdiv id=\"a93e1cff0da\"\u003e\n        \u003cp\u003e\n            Hello, \u003cspan\u003eJohn Doe\u003c/span\u003e\n        \u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## API\n\n#### `$(selector).render(\"\u003cNAME\u003e\", \u003cDATA\u003e)`\n\n- `\u003cNAME\u003e`: String\n\n    Template name is the name of the template in html (e.g.\n    `\u003ctemplate name='TEMPLATE_NAME'\u003e`). Note that the template must be in\n    `template` tag with a `name` attribution so that we can find the template\n    by its name.\n    \n- `\u003cDATA\u003e`: Array *OR* Any other object\n    \n    If the data is an array, say `arr`, then the plugin will render `arr.length`\n    instances of the same template `\u003cNAME\u003e` each serving an element of `arr`.\n    \n    If the data is any other object, you can reference, in Template elements'\n    attributions, using `data`. We will explain more in the next section\n    \n#### Template data fields\n\n1. To put the data as texts to the template, we use attribution `data-text`:\n\n    ``` html\n    \u003ctemplate name=\"student\"\u003e\n        \u003cspan\u003e\n            \u003cspan data-text=\"data.firstName\"\u003e\u003c/span\u003e\n            \u003cspan data-text=\"data.lastName\"\u003e\u003c/span\u003e\n        \u003c/span\u003e\n    \u003c/template\u003e\n    ```\n    \n    ``` js\n    $(\"#container\").render(\"student\", {\n        firstName: \"John\",\n        lastName: \"Doe\"\n    });\n    ```\n    \n    Will result in\n    \n    ``` html\n    \u003cdiv id=\"container\"\u003e\n        \u003cspan\u003e\n            \u003cspan\u003eJohn\u003c/span\u003e\n            \u003cspan\u003eDoe\u003c/span\u003e\n        \u003c/span\u003e\n    \u003c/div\u003e\n    ```\n\n2. To put extra html into an element, we use attribution `data-html`:\n    \n    ``` html\n    \u003ctemplate name=\"student\"\u003e\n        \u003cspan data-html=\"data.html\"\u003e\u003c/span\u003e\n    \u003c/template\u003e\n    ```\n    \n    ``` js\n    $(\"#container\").render(\"student\", {\n        html: \"\u003ca href=\\\"http://example.com\\\"\u003eclick here\u003c/a\u003e\"\n    });\n    ```\n    \n    Result:\n    \n    ``` html\n    \u003cdiv id=\"container\"\u003e\n        \u003cspan\u003e\n            \u003ca href=\"http://example.com\"\u003eclick here\u003c/a\u003e\n        \u003c/span\u003e\n    \u003c/div\u003e\n    ```\n\n3. You can also prepend or append html elements using `data-prepend` and\n    `data-append`:\n    \n    ``` html\n    \u003ctemplate name=\"student\"\u003e\n        \u003cul data-prepend=\"data.before\" data-append=\"data.after\"\u003e\n            \u003cli\u003eHobby 1\u003c/li\u003e\n            \u003cli\u003eHobby 2\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/template\u003e\n    ```\n    \n    ``` js\n    $(\"#container\").render(\"student\", {\n        before: \"\u003cli\u003eHobby 0\u003c/li\u003e\",\n        after: \"\u003cli\u003eHobby 3\u003c/li\u003e\"\n    });\n    ```\n    \n    Result:\n    \n    ``` html\n    \u003cdiv id=\"container\"\u003e\n        \u003cli\u003eHobby 0\u003c/li\u003e\n        \u003cli\u003eHobby 1\u003c/li\u003e\n        \u003cli\u003eHobby 2\u003c/li\u003e\n        \u003cli\u003eHobby 3\u003c/li\u003e\n    \u003c/div\u003e\n    ```\n\n4. You can add class to an element by using `data-class`.\n\n    ``` html\n    \u003ctemplate name=\"student\"\u003e\n        \u003cspan data-class=\"data.hidden ? 'hidden' : ''\"\u003eThis will be hidden\u003c/span\u003e\n    \u003c/template\u003e\n    ```\n    \n    \u003e Note that here we used a js syntax expression\n    \u003e `data.hidden ? 'hidden' : ''`. This is very convenient for most of the\n    \u003e users since you will not need to finish processing all the information\n    \u003e prior to rendering. If sometimes simple expression are not working\n    \u003e as expected, you can even *call globally accessible functions*!\n    \n    ``` js\n    $(\"#container\").render(\"student\", {\n        hidden: true\n    });\n    ```\n\n    Result:\n\n    ``` html\n    \u003cdiv id=\"container\"\u003e\n        \u003cspan class=\"hidden\"\u003eThis will be hidden\u003c/span\u003e\n    \u003c/div\u003e\n    ```\n\n5. You can add css to an element by using `data-css`.\n\n    ``` html\n    \u003ctemplate name=\"student\"\u003e\n        \u003cspan data-css=\"data.css\"\u003eThis is red\u003c/span\u003e\n    \u003c/template\u003e\n    ```\n\n    ``` js\n    $(\"#container\").render(\"student\", {\n        css: {\n            color: \"red\"\n        }\n    });\n    ```\n\n    Result:\n\n    ``` html\n    \u003cdiv id=\"container\"\u003e\n        \u003cspan style=\"color: red;\"\u003eThis is red\u003c/span\u003e\n    \u003c/div\u003e\n    ```\n\n6. For the following keywords, using `data-\u003cKEY\u003e` will directly add `\u003cKEY\u003e`\n    attribute to the element. For example, setting `data-id` to `'asdf'` will\n    result in `id=\"asdf\"`:\n    \n    ``` html\n    \u003ctemplate name=\"student\"\u003e\n        \u003cdiv data-id=\"data.pid\" data-text=\"data.name\"\u003e\u003c/div\u003e\n    \u003c/template\u003e\n    ```\n    \n    ``` js\n    $(\"#container\").render(\"student\", {\n        pid: \"as0dfja0g\",\n        name: \"John Doe\"\n    });\n    ```\n    \n    Will result in\n    \n    ``` html\n    \u003cdiv id=\"container\"\u003e\n        \u003cdiv id=\"as0dfja0g\"\u003eJohn Doe\u003c/div\u003e\n    \u003c/div\u003e\n    ```\n\n\u003e Note: if possible, please do not use multiple tags that might result in\n\u003e conflicts in a single element. Because that might cause unexpected behavior.\n\u003e For Example, do not use `data-html` and `data-text` on a single element\n\u003e at the same time.\n\n#### Rendering List\n\nPutting a list into the data will resulting in rendering the specified template\nmultiple times.\n\n``` html\n\u003cul id=\"container\"\u003e\u003c/ul\u003e\n\u003ctemplate name=\"hobby\"\u003e\n    \u003cli data-id=\"data.id\" data-text=\"data.hobby\"\u003e\u003c/li\u003e\n\u003c/template\u003e\n```\n\n``` js\n$(\"#container\").render(\"hobby\", [\n    { id: \"1\", hobby: \"play basketball\" },\n    { id: \"2\", hobby: \"watch movie\" },\n    { id: \"3\", hobby: \"go to restaurant\" },\n    { id: \"4\", hobby: \"drive\" },\n    { id: \"5\", hobby: \"ski\" }\n])\n```\n\nResult:\n\n``` html\n\u003cul id=\"container\"\u003e\n    \u003cli id=\"1\"\u003eplay basketball\u003c/li\u003e\n    \u003cli id=\"2\"\u003ewatch movie\u003c/li\u003e\n    \u003cli id=\"3\"\u003ego to restaurant\u003c/li\u003e\n    \u003cli id=\"4\"\u003edrive\u003c/li\u003e\n    \u003cli id=\"5\"\u003eski\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n#### Nesting Template\n\nIn this example, we want to render multiple students, each has their own list\nof hobbies. So within a single student template, there will be multiple hobbies\nbeing rendered. Let's take a look at how we are going to achieve this.\n\n``` html\n\n\u003c!-- The Container --\u003e\n\u003cul id=\"container\"\u003e\u003c/ul\u003e\n\n\u003c!-- The Student --\u003e\n\u003ctemplate name=\"student\"\u003e\n    \u003cp\u003e\n        \u003cspan data-text=\"data.firstName\"\u003e\u003c/span\u003e\n        \u003cspan data-text=\"data.lastName\"\u003e\u003c/span\u003e\n    \u003c/p\u003e\n    \u003cp\u003eMy Hobbies:\u003c/p\u003e\n    \u003cul template-name=\"hobby\" template-data=\"data.hobbies\"\u003e\u003c/ul\u003e\n\u003c/template\u003e\n\n\u003c!-- The Hobby --\u003e\n\u003ctemplate name=\"hobby\"\u003e\n    \u003cli data-text=\"data\"\u003e\u003c/li\u003e\n\u003c/template\u003e\n```\n\nNote that in the `ul` tag in `student` template, we use `template-name` attr to\nspecify which template we want to use to nest the list, and `template-data` attr\nto tell the renderer which data to use to render the template. Note that here,\nthe `template-data` does not need to be an array. It can be anything as long\nas it suits the sub-template.\n\nAlso note that in `hobby` template, the `data-text` attr only has `data`. This\nis because the hobby is just a string (but not object or other stuff). So you\ncan just use data to put the hobby `string` inside the `li` tag.\n\n``` js\n$(\"#container\").render(\"student\", [\n    {\n        firstName: \"John\",\n        lastName: \"Doe\",\n        hobbies: [ \"hobby 0\", \"hobby 1\", \"hobby 2\" ]\n    },\n    {\n        firstName: \"Liby\",\n        lastName: \"99\",\n        hobbies: [ \"programming\", \"jquery\" ]\n    },\n    {\n        firstName: \"Kizuna\",\n        lastName: \"Ai\",\n        hobbies: [ \"play games\", \"dance\" ]\n    }\n]);\n```\n\nVoila! The result is just as simple as expected:\n\n``` html\n\u003cul id=\"container\"\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cspan\u003eJohn\u003c/span\u003e\n            \u003cspan\u003eDoe\u003c/span\u003e\n        \u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eHobby 0\u003c/li\u003e\n            \u003cli\u003eHobby 1\u003c/li\u003e\n            \u003cli\u003eHobby 2\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cspan\u003eLiby\u003c/span\u003e\n            \u003cspan\u003e99\u003c/span\u003e\n        \u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eprogramming\u003c/li\u003e\n            \u003cli\u003ejquery\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cspan\u003eKizuna\u003c/span\u003e\n            \u003cspan\u003eAi\u003c/span\u003e\n        \u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eplay games\u003c/li\u003e\n            \u003cli\u003edance\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Examples\n\nThere are much more examples inside `/example` folder. Please pay there a visit\nif there's anything unclear after this README.\n\n## Contribution\n\nSuper open for contribution! Ping me for any question or advice and welcome\nto submit a pull request!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliby99%2Fjquery-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliby99%2Fjquery-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliby99%2Fjquery-template/lists"}