{"id":17483844,"url":"https://github.com/creationix/jquery-haml","last_synced_at":"2025-04-10T02:43:26.515Z","repository":{"id":605500,"uuid":"242189","full_name":"creationix/jquery-haml","owner":"creationix","description":"jQuery-haml is a haml like language written in JSON.  This allows for easy dom building so that web apps can do more work independent of the server for a better user experience.","archived":false,"fork":false,"pushed_at":"2010-06-10T04:39:07.000Z","size":785,"stargazers_count":111,"open_issues_count":3,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T04:13:39.061Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://plugins.jquery.com/project/jquery-haml","language":"JavaScript","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/creationix.png","metadata":{"files":{"readme":"README.markdown","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}},"created_at":"2009-07-03T04:28:58.000Z","updated_at":"2023-09-08T16:25:34.000Z","dependencies_parsed_at":"2022-08-06T09:16:03.371Z","dependency_job_id":null,"html_url":"https://github.com/creationix/jquery-haml","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fjquery-haml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fjquery-haml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fjquery-haml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fjquery-haml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creationix","download_url":"https://codeload.github.com/creationix/jquery-haml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248145252,"owners_count":21055089,"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","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-19T00:48:05.175Z","updated_at":"2025-04-10T02:43:26.462Z","avatar_url":"https://github.com/creationix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery-haml\n\njQuery-haml is a [haml][] like language written in JSON. This allows for easy dom building so that web apps can do more work independent of the server for a better user experience. Based on [haml][] from the ruby world.\n\nYou can see a small example page using it at \u003chttp://static.creationix.com/jquery-haml/examples/index.html\u003e\n\nView source to see that all the content is build after page load.\n\n# NOTE: This project was recently split\n\nThe server-side half of the component stayed at the old name of [haml-js][] and has it's own documentation and everything there.\n\n---------------------\n\njQuery-haml is a [jQuery][] plugin. In order to use it you simply include the `jquery.haml-1.3.js` file in your jQuery project and use it as a dom builder.\n\n## How to use\n\n### Basic Syntax\n\nHere is the first example from the haml site converted to jsonified haml:\n\n**jsonified-haml**\n\n    [\".profile\",\n      [\".left.column\",\n        [\"#date\", print_date() ],\n        [\"#address\", curent_user.address ]\n      ],\n      [\".right.column\",\n        [\"#email\", current_user.email ],\n        [\"#bio\", current_user.bio ]\n      ]\n    ]\n\n**html**\n\n    \u003cdiv class=\"profile\"\u003e\n      \u003cdiv class=\"left column\"\u003e\n        \u003cdiv id=\"date\"\u003eFriday, July 3, 2009\u003c/div\u003e\n        \u003cdiv id=\"address\"\u003eRichardson, TX\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"right column\"\u003e\n        \u003cdiv id=\"email\"\u003etim@creationix.com\u003c/div\u003e\n        \u003cdiv id=\"bio\"\u003eExperienced software professional...\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\nOne thing you'll notice right away is that this is encoded in pure JSON. This means that you can stream it from a server via ajax calls and it can be executed in the browser to create dom structures on the fly.\n\nThe basic rules are very similar to the real [haml][] for ruby. If the first item in a list is a string, then that is the css selector for that node. It consists of `element#id.class`. If the element is left out, jQuery-haml will assume div. You can have multiple css classes and even include spaces. The id and class are of course optional. After that, everything in the list is considered content inside the node. Arrays are child nodes and more strings are text nodes.\n\n### Attributes syntax\n\nHere is another example with some html attributes specified:\n\n**jsonified-haml**\n\n    [\"%strong\", {class: \"code\", style: \"color:red;\"},  \"Hello, World!\"]\n\n**html**\n\n    \u003cstrong class=\"code\" style=\"color:red;\"\u003eHello, World!\u003c/strong\u003e\n\nThe new thing to note here is that we can specify html attributes. This is done by including a json object after the string representing the node's css selector. The keys and values become the attributes of the html node.\n\n### CSS Special Syntax\n\nSometimes css can be complex enough that some structure is desired.\n\n**jsonified-haml**\n\n    [\"#main\", {css: {position: \"absolute\", left:0, right:0, top:0, bottom:0}},\n      [\".greeting\", {css: {\"margin-top\": \"200px\", \"text-align\": \"center\"}}, \"Hello, World!\"]\n    ]\n\n**html**\n\n    \u003cdiv id=\"main\" style=\"position:absolute;left:0;right:0;top:0;bottom:0;\"\u003e\n      \u003cdiv class=\"greeting\" style=\"margin-top:200px;text-align:center;\"\u003eHello, World!\u003c/div\u003e\n    \u003c/div\u003e\n\nWhen `css`, is used as an attribute, the value is a json object with key/value pairs representing the css styles. These will be applied using jQuery's css method. Note that other parameters can be used in this same overall hash. Also if preferred, a regular style attribute can be specified with manually formatted css.\n\n### Javascript jQuery plugin Syntax\n\nThis is where this template language/framework really shines. Until now, this had little power over server side html generation or other dom builders like the ones built into other frameworks. Javascript execution syntax allows you to declaratively schedule JavaScript methods to be called when the node gets attached to the page.\n\n**jsonified-haml**\n\n    [\"%div\", {style: \"width:260px; margin:15px;\", $:{\n      slider: [{value: 60}]\n    }}]\n\n**html**\n\n    \u003cdiv style=\"margin: 15px; width: 260px;\" class=\"ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all\"\u003e\n      \u003ca href=\"#\" class=\"ui-slider-handle ui-state-default ui-corner-all\" style=\"left: 60%;\"/\u003e\n    \u003c/div\u003e\n\nThis will render a fully functional slider widget from the [jQuery-ui][] library. Internally it queues up an event to call the `slider` method on the created node once it's attached to some element that's part of the page. Like the css syntax, this is encoded as an attribute. If the attribute it dollar, `$`, then the key/value pairs are method name and method parameters that are schedules to be applied to the node once it's live.\n\n### Javascript onload Syntax\n\nSometimes the jquery plugins aren't enough, or you need to call the same plugin more than once, but only ome key is allowed in a hash. This is where the onload syntax comes in handy.\n\n    [\"%div\", {style: \"width:260px; margin:15px;\", $:{\n      slider: [{value: 60}],\n      $: function() { this.slider('disable'); }\n    }}]\n\nIn this example, we wanted to call the disable action on the slider plugin after turning the div into a slider. This was done with a generic onload function. The function given will be called in scope of the jquery node.\n\n### Turning the jQuery-haml into DOM HTML\n\nUsually you will be wanting to attach these element to some part of the page and so the this format is used more often. This is the `.haml` plugin that all jQuery object now have.\n\n    $(\"body\").haml([\"%p\", \"Hello \", [\"%img\",{src:\"logo.jpg\"}]]);\n\nThis will create the new element and append it to the end of the body tag. Once it's the recursive function gets to the last step and appends the element tree to the page, any event's queued up would then take place.\n\nHere is a fun one.  Add a paragraph saying \"Hello World\" onto every element in a page.\n\n    $('*').haml([\"%p\", \"Hello World\"])\n\nRun that in the Javascript console of any page that has jquery-haml loaded and watch the messages fly.\n\n## TopCloud\n\nSince jquery-haml can get out of hand for large applications, I wrote an abstraction layer on top of it.  Check out [TopCloud][].\n\n## Get Involved\n\nIf you want to use this project and something is missing then send me a message.  I'm very busy and have several open source projects I manage.  I'll contribute to this project as I have time, but if there is more interest for some particular aspect, I'll work on it a lot faster.  Also you're welcome to fork this project and send me patches/pull-requests.\n\n## License\n\njQuery-haml is [licensed][] under the [MIT license][].\n\n[MIT license]: http://creativecommons.org/licenses/MIT/\n[licensed]: http://github.com/creationix/jquery-haml/blob/master/LICENSE\n[haml]: http://haml.hamptoncatlin.com/\n[jquery]: http://jquery.com/\n[jquery-ui]: http://jqueryui.com/\n[TopCloud]: http://github.com/creationix/topcloud\n[haml-js]: http://github.com/creationix/haml-js","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreationix%2Fjquery-haml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreationix%2Fjquery-haml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreationix%2Fjquery-haml/lists"}