{"id":18509957,"url":"https://github.com/archywillhe/template-butler","last_synced_at":"2025-07-30T17:40:06.728Z","repository":{"id":25458015,"uuid":"28888232","full_name":"archywillhe/Template-Butler","owner":"archywillhe","description":"writing DRY client-side JS with dependency for templates in Meteor.","archived":false,"fork":false,"pushed_at":"2015-04-01T22:37:58.000Z","size":185,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T21:40:31.872Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/archywillhe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-06T23:16:39.000Z","updated_at":"2020-07-09T11:24:26.000Z","dependencies_parsed_at":"2022-08-24T00:30:34.608Z","dependency_job_id":null,"html_url":"https://github.com/archywillhe/Template-Butler","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/archywillhe/Template-Butler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archywillhe%2FTemplate-Butler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archywillhe%2FTemplate-Butler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archywillhe%2FTemplate-Butler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archywillhe%2FTemplate-Butler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/archywillhe","download_url":"https://codeload.github.com/archywillhe/Template-Butler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archywillhe%2FTemplate-Butler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267912106,"owners_count":24164498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-11-06T15:19:47.756Z","updated_at":"2025-07-30T17:40:06.646Z","avatar_url":"https://github.com/archywillhe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## What is Template Butler ##\n\nTemplate Butler (or TButler) is a library for writing reusable client-side JS for Templates on Meteor. It is designed for apps with sophisticated DOM view logic.\n\n## QuickStart ##\nAdd Template Butler to your Meteor project\n```bash\nmeteor add arch:template-butler\n```\n\n\n## Basic Usage ##\n\nYou can use either `TemplateButler` or `TButler`. They both refer to the same object.\n\n```javascript\nTButler.code(\"codeblock1\", function(){\n    //some code here\n});\nTButler.code(\"codeblock2\", function(){\n    //some code here\n});\nTButler.process(\"TemplateName\",[\"codeblock1\",\"codeblock2\"]); \n```\n\nThis would call `codeblock1` and `codeblock2` when `Template.TemplateName` is rendered.\n\nYou can also pass the object as parameter without giving it a string identifier.\n```javascript\nvar someVariable = TButler.code(function(){\n    //some code here\n});\nTButler.process(\"TemplateName\",[someVariable]); \n```\n\n## Dependency ##\n```javascript\nTButler.code(\"a\", function(){\n    //some functions here\n});\nTButler.code(\"b\", function(){\n    //some functions here\n});\nTButler.code(\"x\", function(){\n    //some functions here\n});\n\nTButler.process(\"Archy\",[\"a\"]);\nTButler.process(\"Cat\",[\"b\"]).depends([\"Archy\"]); //name of the process(s) to depend on\nTButler.process(\"Cat\",[\"x\"]);\n```\nAfter `Template.Cat` is rendered, `b` would not be called until `Template.Archy` is rendered. However, `x` would be called immediately after `Template.Cat` is rendered because it does not depend on anything.\n\n\nNote: Unless an object `{TemplateName:\"processName\"}` is passed as the 1st arguement, a process would have the same name as the Template.\n\n```javascript\nTButler.process({TemplateName:\"processName\"},[\"codeblock1\",\"codeblock2\"]);\nTButler.process(\"Cat\",[\"b\"]).depends([\"processName\"]);\n```\n\n## Setting variables on Template.created ##\n```javascript\nTButler.code(\"a\", function(){\n    console.log(TButler.env.key);\n});\nTButler.process(\"Archy\",[\"a\"],{key:\"value1\"});\nTButler.process(\"Cat\",[\"a\"],{key:\"value2\"});\n```\nThis would log \"value1\" after `Template.Archy` is rendered, and \"value2\" after `Template.Cat` is rendered.\n\n## On Template.destroyed ##\n\n```javascript\nTButler.code(\"c\", function(){\n    //functions here would be called on Template.rendered\n},function(){\n   //functions here would be called on Template.destroyed\n});\nTButler.process(\"_footer\",[\"c\"]); \n```\n\nThe 2nd function that is passed into the `.code` would be called on `Template.destroyed`.\n\nThis is another way of doing it:\n\n```javascript\nTButler.process(\"_footer\",[TButler.code(function(){\n    //code here would be called on Template.rendered\n},function(){\n   //code here would be called on Template.destroyed\n})]); \n```\n\n## Mobile view ##\n\n```javascript\nTButler.mobileView(700); //this would assume that it is a mobile device if the window's width is smaller than 700px\nTButler.code(\"c\", function(){\n    //called no matter if it is a mobile device or not\n}).addToFn(\"mobile\",function(){\n   //called if it is a morible device\n}).addToFn(\"default\",function(){\n  //called if it is not a mobile device\n});\nTButler.process(\"appLayout\",[\"c\"]); \n```\n\nIf `TButler.mobileView(max_width)` is not called, the function in `addToFn(\"default\",function)` would always be called. \n\nYou can always append more code into the code by using `.addToFn`.\n\n## Cleaning up the function(s) in a code block ##\n```javascript\nvar a = TButler.code(\"codeblock1\", function(){\n});\na.reset() //reset both default and mobile\nBulter.reset('codeblock1'); //alternative\na.reset(\"mobile\") //only reset mobile\n```\n\n## License ##\n\n\"THE BEER-WARE LICENSE\" (Revision 42):\n\nAs long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchywillhe%2Ftemplate-butler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farchywillhe%2Ftemplate-butler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchywillhe%2Ftemplate-butler/lists"}