{"id":13527063,"url":"https://github.com/BorisMoore/jsrender","last_synced_at":"2025-04-01T09:31:03.166Z","repository":{"id":57286219,"uuid":"1650371","full_name":"BorisMoore/jsrender","owner":"BorisMoore","description":"A lightweight, powerful and highly extensible templating engine. In the browser or on Node.js, with or without jQuery.","archived":false,"fork":false,"pushed_at":"2024-07-14T23:33:25.000Z","size":8449,"stargazers_count":2669,"open_issues_count":3,"forks_count":339,"subscribers_count":153,"default_branch":"master","last_synced_at":"2025-03-26T00:11:48.236Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.jsviews.com","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/BorisMoore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE.txt","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":"2011-04-22T16:29:45.000Z","updated_at":"2025-03-15T20:58:02.000Z","dependencies_parsed_at":"2024-06-18T11:21:39.704Z","dependency_job_id":"345a05c9-b1c3-4cfb-b326-2c565203f9c0","html_url":"https://github.com/BorisMoore/jsrender","commit_stats":{"total_commits":163,"total_committers":6,"mean_commits":"27.166666666666668","dds":0.2760736196319018,"last_synced_commit":"2440b6998fa2568a73f9d04b0e8846ab2f5313d8"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisMoore%2Fjsrender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisMoore%2Fjsrender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisMoore%2Fjsrender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisMoore%2Fjsrender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BorisMoore","download_url":"https://codeload.github.com/BorisMoore/jsrender/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246615938,"owners_count":20806031,"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-08-01T06:01:40.226Z","updated_at":"2025-04-01T09:31:01.961Z","avatar_url":"https://github.com/BorisMoore.png","language":"JavaScript","readme":"## JsRender: best-of-breed templating\n\n[![CDNJS version](https://img.shields.io/cdnjs/v/jsrender.svg)](https://cdnjs.com/libraries/jsrender)\n\n*Simple and intuitive, powerful and extensible, lightning fast*\n\n*For templated content in the browser or on Node.js (with Express 4, Hapi and Browserify integration)*\n\n**JsRender** is a light-weight but powerful templating engine, highly extensible, and optimized for high-performance rendering, without DOM dependency. It is designed for use in the browser or on Node.js, with or without jQuery.\n\n**[JsRender](https://github.com/BorisMoore/jsrender)** and **[JsViews](https://github.com/BorisMoore/jsviews)** together provide the next-generation implementation of the official jQuery plugins *[JQuery Templates](https://github.com/BorisMoore/jquery-tmpl)*, and *[JQuery Data Link](https://github.com/BorisMoore/jquery-datalink)* -- and supersede those libraries.\n\n### Documentation and downloads\n\n**[Documentation](http://www.jsviews.com)**, **[downloads](http://www.jsviews.com/#download)**, **[samples](http://www.jsviews.com/#samples)** and **[API docs and tutorials](http://www.jsviews.com/#jsrapi)** are available on the **[www.jsviews.com website](http://www.jsviews.com/#jsrender)**.\n\nThe content of this ***ReadMe*** is available also as a *[JsRender Quickstart](http://www.jsviews.com/#jsr-quickstart)*.\n\n### JsRender and JsViews\n\nJsRender is used for data-driven rendering of templates to strings, ready for insertion in the DOM.\n\nIt is also used by the *[JsViews](http://www.jsviews.com/#jsviews)* platform, which adds data binding to JsRender templates, and provides a fully-fledged MVVM platform for easily creating interactive data-driven single page apps and websites.\n\n## JsRender installation\n\n*jsrender.js* is available from [downloads](http://www.jsviews.com/#download) on the jsviews.com site. \n\n*CDN delivery* is available from the ***[cdnjs](https://cdnjs.com)*** CDN at [cdnjs.com/libraries/jsrender](https://cdnjs.com/libraries/jsrender).\n\nAlternatively:\n- It can be installed with **[Bower](http://bower.io/search/?q=jsrender)**, using `$ bower install jsrender` \n- It can be loaded using an *AMD script loader*, such as RequireJS\n- For installation using *Node.js* (*npm*) see *[JsRender Node.js Quickstart](http://www.jsviews.com/#jsr-node-quickstart)*\n- (For browser loading using *Browserify* or *webpack* - see *[JsRender Node.js Quickstart](http://www.jsviews.com/#jsr-node-quickstart)*, *[JsRender as a Browserify module](http://www.jsviews.com/#node/browserify@jsrender)* and *[JsRender as a webpack module](http://www.jsviews.com/#node/webpack@jsrender)*)\n\n#### Using JsRender with jQuery\n\nWhen jQuery is present, JsRender loads as a jQuery plugin and adds `$.views`, `$.templates` and `$.render` to the jQuery namespace object, `$` (or `window.jQuery`).\n\n*Example HTML page:* [JsRender with jQuery](http://www.jsviews.com/#download/pages-jsr-jq)\n\n#### Using JsRender without jQuery\n\nWhen jQuery is not present, JsRender provides its own global namespace object:  `jsrender` (or `window.jsrender`)\n\nThe `jsrender` namespace provides the same methods/APIs as with jQuery, so if jQuery is not present you can still use all the API examples, by simply writing:\n\n```js\nvar $ = window.jsrender;\n\n// Now use code as in samples/examples, with $.views... $.templates... $.render...\n```\n(*Note:* If jQuery is not loaded, then [passing a jQuery selector](http://www.jsviews.com/#compiletmpl@fromscriptblock) to `$.templates()` will only work for the *ID selector*)\n\n*Example HTML page:* [JsRender without jQuery](http://www.jsviews.com/#download/pages-jsr)\n\n#### JsRender on Node.js\n\nJsRender can be used to render templates on the server (using Node.js) as well as in the browser. JsRender on Node.js has all the features and APIs of JsRender in the browser, plus some additional ones specific to Node.js.\n\nIt also provides built-in *Express*, *Hapi* and *Browserify* integration -- which makes it easy to register templates as simple `.html` files on the file system, and then load and render them either server-side, client-side or both.\n\n**Learn more:** *[JsRender Node.js Quickstart](http://www.jsviews.com/#jsr-node-quickstart)* and *[JsRender APIs for Node.js](http://www.jsviews.com/#jsrnode)*.\n\n**Code samples:** See *[JsRender Node Starter](https://github.com/BorisMoore/jsrender-node-starter)* for running code examples of Node.js scenarios, including with *Express*, *Hapi* and *Browserify*.\n\n## JsRender usage\n\n### _Define a template_\n\nFrom a string:\n\n```js\nvar tmpl = $.templates(\"Name: {{:name}}\");\n```\n\nFrom a template declared as markup in a script block:\n\n```html\n\u003cscript id=\"myTemplate\" type=\"text/x-jsrender\"\u003e\nName: {{:name}}\n\u003c/script\u003e\n```\n\nthen, somewhere in your script:\n\n```js\nvar tmpl = $.templates(\"#myTemplate\"); // Pass in a jQuery selector for the script block\n```\n\nOn Node.js, [from an .html file](https://www.jsviews.com/#jsr-node-quickstart@htmlfiles)  containing the template markup: \n\n```js\nvar $ = require('jsrender'); // returns the jsrender namespace object\nvar tmpl = $.templates(\"./templates/myTemplate.html\");\n```\n\n[Learn more...](http://www.jsviews.com/#d.templates)\n\n### _Render a template_\n\n`tmpl.render(object)` (or shortcut form: `tmpl(object)`) renders the template with the object as data context.\n\n```js\nvar tmpl = $.templates(\" Name: {{:name}}\u003cbr/\u003e \");\n\nvar person = {name: \"Jim\"};\n\n// Render template for person object\nvar html = tmpl.render(person); // ready for insertion, e.g $(\"#result\").html(html);\n\n// result: \"Name: Jim\u003cbr/\u003e \"\n```\n\n`tmpl.render(array)` (or `tmpl(array)`) renders the template once for each item in the array.\n\n```js\nvar people = [{name: \"Jim\"}, {name: \"Pedro\"}];\n\n// Render template for people array\nvar html = tmpl.render(people); // ready for insertion...\n\n// result: \"Name: Jim\u003cbr/\u003e Name: Pedro\u003cbr/\u003e \"\n```\n\n[Learn more...](http://www.jsviews.com/#rendertmpl)\n\n### _Register a named template - and render it_\n\n```js\n// Register named template - \"myTmpl1\n$.templates(\"myTmpl1\", \"Name: {{:name}}\u003cbr/\u003e \");\n\nvar person = {name: \"Jim\"};\n\n// Render named template\nvar html = $.templates.myTmpl1(person);\n\n// Alternative syntax: var html = $.render.myTmpl1(person);\n\n// result: \"Name: Jim\u003cbr/\u003e \"\n```\n\n[Learn more...](http://www.jsviews.com/#rendertmpl)\n\n### _Template tags_\n\n#### Template tag syntax\n\n- All tags other than `{{: ...}}` `{{\u003e ...}}` `{{* ...}}` `{{!-- --}}` behave as *block tags*\n\n- Block tags can have content, unless they use the self-closing syntax:\n    - *Block tag - with content:* `{{someTag ...}} content {{/someTag}}`\n    - *Self-closing tag - no content (empty):* `{{someTag .../}}`\n\n- A particular case of self-closing syntax is when any block tag uses the named parameter `tmpl=...` to reference an external template, which then replaces what would have been the block content:\n \n    - *Self-closing block tag referencing an external template:* `{{someTag ... tmpl=.../}}`\n (This lets you do [template composition](http://www.jsviews.com/#tagsyntax@composition). See [example](http://www.jsviews.com/#samples/jsr/composition/tmpl).)\n\n- Tags can take both unnamed arguments and named parameters:\n    - `{{someTag argument1 param1=...}} content {{/someTag}}`\n    - an example of a named parameter is the `tmpl=...` parameter mentioned above\n    - arguments and named parameters can be assigned values from simple data-paths such as `address.street` or from richer expressions such as `product.quantity * 3.1 / 4.5`, or `name.toUpperCase()`\n\n[Learn more...](http://www.jsviews.com/#tagsyntax)\n\n#### Built-in tags\n\n#### _{{: ...}}_ (Evaluate)\n\n`{{: pathOrExpr}}` inserts the value of the path or expression.\n\n```js\nvar data = {address: {street: \"Main Street\"} };\nvar tmpl = $.templates(\"\u003cb\u003eStreet:\u003c/b\u003e {{:address.street}}\");\nvar html = tmpl.render(data);\n\n// result: \"\u003cb\u003eStreet:\u003c/b\u003e Main Street\"\n```\n\n[Learn more...](http://www.jsviews.com/#assigntag)\n\n#### _{{\u003e ...}}_ (HTML-encode) \n\n`{{\u003e pathOrExpr}}` inserts the *HTML-encoded* value of the path or expression.\n\n```js\nvar data = {condition: \"a \u003c b\"};\nvar tmpl = $.templates(\"\u003cb\u003eFormula:\u003c/b\u003e {{\u003econdition}}\");\nvar html = tmpl.render(data);\n\n// result: \"\u003cb\u003eFormula:\u003c/b\u003e a \u0026lt; b\"\n```\n\n[Learn more...](http://www.jsviews.com/#htmltag)\n\n#### _{{include ...}}_ (Template composition - partials)\n\n`{{include pathOrExpr}}...{{/include}}`evaluates the block content against a specified/modified data context.\n\n`{{include ... tmpl=.../}}` evaluates the specified template against an (optionally modified) context, and inserts the result. (Template composition).\n\n```js\nvar data = {name: \"Jim\", address: {street: \"Main Street\"} };\n\n// Register two named templates\n$.templates({\n  streetTmpl: \"\u003ci\u003e{{:street}}\u003c/i\u003e\",\n  addressTmpl: \"{{:name}}'s address is {{include address tmpl='streetTmpl'/}}.\"\n});\n\n// Render outer template\nvar html = $.templates.addressTmpl(data);\n\n// result: \"Jim's address is \u003ci\u003eMain Street\u003c/i\u003e\"\n```\n\n[Learn more...](http://www.jsviews.com/#includetag)\n\n#### _{{for ...}}_ (Template composition, with iteration over arrays)\n\n`{{for pathOrExpr}}...{{/for}}`evaluates the block content against a specified data context. If the new data context is an array, it iterates over the array, renders the block content with each data item as context, and concatenates the result.\n\n`{{for pathOrExpr tmpl=.../}}` evaluates the specified template against a data context. If the new data context is an array, it iterates over the array, renders the template with each data item as context, and concatenates the result.\n\n```html\n\u003cscript id=\"peopleTmpl\" type=\"text/x-jsrender\"\u003e\n  \u003cul\u003e{{for people}}\n    \u003cli\u003eName: {{:name}}\u003c/li\u003e\n  {{/for}}\u003c/ul\u003e\n\u003c/script\u003e\n```\n\n```js\nvar data = {people: [{name: \"Jim\"}, {name: \"Pedro\"}] };\nvar tmpl = $.templates(\"#peopleTmpl\");\nvar html = tmpl.render(data);\n\n// result: \"\u003cul\u003e \u003cli\u003eName: Jim\u003c/li\u003e \u003cli\u003eName: Pedro\u003c/li\u003e \u003c/ul\u003e\"\n```\n\n[Learn more...](http://www.jsviews.com/#fortag)\n\n#### _{{props ...}}_ (Iteration over properties of an object)\n\n`{{props pathOrExpr}}...{{/prop}}` or `{{props pathOrExpr tmpl=.../}}` iterates over the properties of the object returned by the path or expression, and renders the content/template once for each property - using as data context: `{key: propertyName, prop: propertyValue}`.\n\n```html\n\u003cscript id=\"personTmpl\" type=\"text/x-jsrender\"\u003e\n  \u003cul\u003e{{props person}}\n    \u003cli\u003e{{:key}}: {{:prop}}\u003c/li\u003e\n  {{/props}}\u003c/ul\u003e\n\u003c/script\u003e\n```\n\n```js\nvar data = {person: {first: \"Jim\", last: \"Varsov\"} };\nvar tmpl = $.templates(\"#personTmpl\");\nvar html = tmpl.render(data);\n\n// result: \"\u003cul\u003e \u003cli\u003efirst: Jim\u003c/li\u003e \u003cli\u003elast: Varsov\u003c/li\u003e \u003c/ul\u003e\"\n```\n\n[Learn more...](http://www.jsviews.com/#propstag)\n\n#### _{{if ...}}_ (Conditional inclusion)\n\n`{{if pathOrExpr}}...{{/if}}` or `{{if pathOrExpr tmpl=.../}}` renders the content/template only if the evaluated path or expression is 'truthy'.\n\n`{{if pathOrExpr}}...{{else pathOrExpr2}}...{{else}}...{{/if}}` behaves as '*if' - 'else if' - 'else'* and renders each block based on the conditions.\n\n```html\n\u003cscript id=\"personTmpl\" type=\"text/x-jsrender\"\u003e\n  {{if nickname}}\n    Nickname: {{:nickname}}\n  {{else name}}\n    Name: {{:name}}\n  {{else}}\n    No name provided\n  {{/if}}\n\u003c/script\u003e\n```\n\n```js\nvar data = {nickname: \"Jim\", name: \"James\"};\nvar tmpl = $.templates(\"#personTmpl\");\nvar html = tmpl.render(data);\n\n// result: \"Nickname: Jim\"\n```\n\n[Learn more...](http://www.jsviews.com/#iftag)\n\n#### Other built-in tags\n\nFor details on all the above built-in tags, as well as *[comment tags](http://www.jsviews.com/#commenttag)* _{{!-- ... --}}_ and *[allow code tags](http://www.jsviews.com/#allowcodetag)* _{{\\*\u0026nbsp;...\u0026nbsp;}} and {{\\*:\u0026nbsp;...}}_, see the [tags documentation](http://www.jsviews.com/#jsrtags) on jsviews.com.\n\n#### Custom tags\n\nCreating your own custom tags is easy. You can provide an object, with render method, template, event handlers, etc. See samples [here](http://www.jsviews.com/#samples/jsr/tags) and [here](http://www.jsviews.com/#samples/tag-controls) on jsviews.com. But for simple tags, you may only need a simple render function, or a template string. \n\nFor example the two following definitions for a `{{fullName/}}` tag provide equivalent behavior:\n\nAs a render function:\n\n```js\n$.views.tags(\"fullName\", function(val) {\n  return val.first + \" \" + val.last;\n});\n```\n\nOr as a template string:\n\n```js\n$.views.tags(\"fullName\", \"{{:first}} {{:last}}\");\n```\n\nEither way, the result will be as follows:\n\n```js\nvar tmpl = $.templates(\"{{fullName person/}}\");\nvar data = {person: {first: \"Jim\", last: \"Varsov\"}};\nvar html = tmpl.render(data);\n\n// result: \"Jim Varsov\"\n```\n\n### _Helpers_\n\nFor details on helpers, see the [Helpers](http://www.jsviews.com/#helpers) documentation topic on jsviews.com.\n\nHere is a simple example. Two helpers - a function, and a string:\n\n```js\nvar myHelpers = {\n  upper: function(val) { return val.toUpperCase(); },\n  title: \"Sir\"\n};\n```\n\nAccess the helpers using the `~myhelper` syntax:\n\n```js\nvar tmpl = $.templates(\"{{:~title}} {{:first}} {{:~upper(last)}}\");\n```\n\nWe can pass the helpers in with the `render()` method\n\n```js\nvar data = {first: \"Jim\", last: \"Varsov\"};\n\nvar html = tmpl.render(data, myHelpers);\n\n// result: \"Sir Jim VARSOV\"\n```\n\nOr we can register helpers globally:\n\n```js\n$.views.helpers(myHelpers);\n\nvar data = {first: \"Jim\", last: \"Varsov\"};\nvar html = tmpl.render(data);\n\n// result: \"Sir Jim VARSOV\"\n```\n\n[Learn more...](http://www.jsviews.com/#helpers)\n\n### _Converters_\n\nConverters are used with the `{{:...}}` tag, using the syntax `{{mycvtr: ...}}}`.\n\nExample - an *upper* converter, to convert to upper case: \n\n```js\n$.views.converters(\"upper\", function(val) { return val.toUpperCase(); });\n\nvar tmpl = $.templates(\"{{:first}} {{upper:last}}\");\nvar data = {first: \"Jim\", last: \"Varsov\"};\nvar html = tmpl.render(data);\n\n// result: \"Jim VARSOV\"\n```\n\n[Learn more...](http://www.jsviews.com/#converters)\n\n### _Logic and expressions_\n\nJsRender supports rich expressions and logic, but at the same time encapsulates templates to prevent random access to globals. If you want to provide access to global variables within a template, you have to pass them in as data or as helpers.\n\nYou can assign rich expressions to any template arguments or parameters, as in:\n\n`{{:person.nickname ? \"Nickname: \" + person.nickname : \"(has no nickname)\"}}`\n\nor\n\n```html\n{{if ~limits.maxVal \u003e (product.price*100 - discount)/rate}}\n  ...\n{{else ~limits.minVal \u003c product.price}}\n  ... \n{{else}}\n  ... \n{{/if}}\n```\n\n### _Documentation and APIs_\n\nSee the [www.jsviews.com](http://www.jsviews.com) site, including the *[JsRender Quickstart](http://www.jsviews.com/#jsr-quickstart)* and [JsRender APIs](http://www.jsviews.com/#jsrapi) topics.\n\n### _Demos_\n\nDemos and samples can be found at [www.jsviews.com/#samples](http://www.jsviews.com/#samples/jsr), and throughout the [API documentation](http://www.jsviews.com/#jsrapi).\n\n(See also the [demos](https://github.com/BorisMoore/jsrender/tree/master/demos) folder of the GitHub repository - available [here](http://borismoore.github.io/jsrender/demos/index.html) as live samples).\n","funding_links":[],"categories":["JavaScript","Repository","18. 模板引擎 ##","18. 模板引擎"],"sub_categories":["Templating","13.20 视差滚动(Parallax Scrolling) ###","13.20 视差滚动(Parallax Scrolling)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBorisMoore%2Fjsrender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBorisMoore%2Fjsrender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBorisMoore%2Fjsrender/lists"}