From c85d07c84afc2f37065399fd433389a88284d378 Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:33:21 -0200 Subject: [PATCH 01/10] Evolving publication --- README.md | 176 +++--------------- .../demos}/movies/PagesCore/movies.html | 0 .../movies/PagesCore/moviesNoGlobals.html | 0 .../demos}/movies/PagesTmplPlus/movies1.html | 0 .../demos}/movies/PagesTmplPlus/movies2.html | 0 .../demos}/movies/PagesTmplPlus/movies3.html | 0 .../components/jquery-ui-1.8.1.custom.js | 0 .../components/jquery-ui-1.8.1.custom.min.js | 0 .../demos}/movies/components/jquery.pager.js | 0 .../movies/css/jquery-ui-1.8.1.custom.css | 0 {demos => app/demos}/movies/css/movies.css | 0 .../ui-bg_diagonals-thick_75_f3d8d8_40x40.png | Bin .../images/ui-bg_dots-small_65_a6a6a6_2x2.png | Bin .../images/ui-bg_flat_0_333333_40x100.png | Bin .../images/ui-bg_flat_65_ffffff_40x100.png | Bin .../images/ui-bg_flat_75_ffffff_40x100.png | Bin .../images/ui-bg_glass_55_fbf8ee_1x400.png | Bin .../images/ui-bg_glass_75_dadada_1x400.png | Bin .../ui-bg_highlight-hard_100_eeeeee_1x100.png | Bin .../ui-bg_highlight-hard_100_f6f6f6_1x100.png | Bin .../ui-bg_highlight-soft_15_cc0000_1x100.png | Bin .../movies/images/ui-icons_004276_256x240.png | Bin .../movies/images/ui-icons_cc0000_256x240.png | Bin .../movies/images/ui-icons_ffffff_256x240.png | Bin {demos => app/demos}/resources/demos.css | 0 {demos => app/demos}/resources/movielist.css | 0 .../demos}/resources/syntaxhighlighter.css | 0 .../demos}/resources/syntaxhighlighter.min.js | 0 .../Interactive/resources/collapsed.png | Bin .../Interactive/resources/empty.png | Bin .../Interactive/resources/expanded.png | Bin .../Interactive/resources/folder.png | Bin .../Interactive/resources/tabs.css | 0 .../Interactive/resources/treeView.css | 0 .../samplesCore/Interactive/tabsTmpl.html | 0 .../samplesCore/Interactive/tabsWrap.html | 0 .../Interactive/tabsWrapImperative.html | 0 .../Interactive/tabsWrapNested.html | 0 .../samplesCore/Interactive/treeView.html | 0 {demos => app/demos}/samplesCore/basic.html | 0 .../demos}/samplesCore/composition.html | 0 .../demos}/samplesCore/conditional.html | 0 {demos => app/demos}/samplesCore/each.html | 0 .../demos}/samplesCore/parameters.html | 0 .../demos}/samplesTmplPlus/basic.html | 0 .../demos}/samplesTmplPlus/composition.html | 0 .../demos}/samplesTmplPlus/parameters.html | 0 {demos => app/demos}/step-by-step.html | 0 .../0_tmpl-read-only/0_local-data-source.html | 0 .../0_tmpl-read-only/0_local-data.html | 0 .../1_remote-data-source.html | 0 .../0_tmpl-read-only/1_remote-data.html | 0 .../0_tmpl-read-only/2_html-tag-source.html | 0 .../0_tmpl-read-only/2_html-tag.html | 0 .../3_if-else-tag-source.html | 0 .../0_tmpl-read-only/3_if-else-tag.html | 0 .../0_tmpl-read-only/4_each-tag-source.html | 0 .../0_tmpl-read-only/4_each-tag.html | 0 .../0_tmpl-read-only/5_javascript-source.html | 0 .../0_tmpl-read-only/5_javascript.html | 0 .../6_hierarchical-data-source.html | 0 .../0_tmpl-read-only/6_hierarchical-data.html | 0 ...0_accordion-switching-template-source.html | 0 .../0_accordion-switching-template.html | 0 .../1_tree-view-using-tmpl-tag-source.html | 0 .../1_tree-view-using-tmpl-tag.html | 0 .../2_tabs-using-wrap-tag-source.html | 0 .../2_tabs-using-wrap-tag.html | 0 jquery.tmpl.js => app/jquery.tmpl.js | 0 jquery.tmplPlus.js => app/jquery.tmplPlus.js | 0 {tests => app/tests}/core.js | 0 {tests => app/tests}/index.html | 0 {tests => app/tests}/qunit.css | 0 {tests => app/tests}/qunit.js | 0 bower.json | 34 ++++ jquery.tmpl.min.js => dist/jquery.tmpl.min.js | 0 .../jquery.tmplPlus.min.js | 0 77 files changed, 61 insertions(+), 149 deletions(-) rename {demos => app/demos}/movies/PagesCore/movies.html (100%) rename {demos => app/demos}/movies/PagesCore/moviesNoGlobals.html (100%) rename {demos => app/demos}/movies/PagesTmplPlus/movies1.html (100%) rename {demos => app/demos}/movies/PagesTmplPlus/movies2.html (100%) rename {demos => app/demos}/movies/PagesTmplPlus/movies3.html (100%) rename {demos => app/demos}/movies/components/jquery-ui-1.8.1.custom.js (100%) rename {demos => app/demos}/movies/components/jquery-ui-1.8.1.custom.min.js (100%) rename {demos => app/demos}/movies/components/jquery.pager.js (100%) rename {demos => app/demos}/movies/css/jquery-ui-1.8.1.custom.css (100%) rename {demos => app/demos}/movies/css/movies.css (100%) rename {demos => app/demos}/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png (100%) rename {demos => app/demos}/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png (100%) rename {demos => app/demos}/movies/images/ui-bg_flat_0_333333_40x100.png (100%) rename {demos => app/demos}/movies/images/ui-bg_flat_65_ffffff_40x100.png (100%) rename {demos => app/demos}/movies/images/ui-bg_flat_75_ffffff_40x100.png (100%) rename {demos => app/demos}/movies/images/ui-bg_glass_55_fbf8ee_1x400.png (100%) rename {demos => app/demos}/movies/images/ui-bg_glass_75_dadada_1x400.png (100%) rename {demos => app/demos}/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png (100%) rename {demos => app/demos}/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png (100%) rename {demos => app/demos}/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png (100%) rename {demos => app/demos}/movies/images/ui-icons_004276_256x240.png (100%) rename {demos => app/demos}/movies/images/ui-icons_cc0000_256x240.png (100%) rename {demos => app/demos}/movies/images/ui-icons_ffffff_256x240.png (100%) rename {demos => app/demos}/resources/demos.css (100%) rename {demos => app/demos}/resources/movielist.css (100%) rename {demos => app/demos}/resources/syntaxhighlighter.css (100%) rename {demos => app/demos}/resources/syntaxhighlighter.min.js (100%) rename {demos => app/demos}/samplesCore/Interactive/resources/collapsed.png (100%) rename {demos => app/demos}/samplesCore/Interactive/resources/empty.png (100%) rename {demos => app/demos}/samplesCore/Interactive/resources/expanded.png (100%) rename {demos => app/demos}/samplesCore/Interactive/resources/folder.png (100%) rename {demos => app/demos}/samplesCore/Interactive/resources/tabs.css (100%) rename {demos => app/demos}/samplesCore/Interactive/resources/treeView.css (100%) rename {demos => app/demos}/samplesCore/Interactive/tabsTmpl.html (100%) rename {demos => app/demos}/samplesCore/Interactive/tabsWrap.html (100%) rename {demos => app/demos}/samplesCore/Interactive/tabsWrapImperative.html (100%) rename {demos => app/demos}/samplesCore/Interactive/tabsWrapNested.html (100%) rename {demos => app/demos}/samplesCore/Interactive/treeView.html (100%) rename {demos => app/demos}/samplesCore/basic.html (100%) rename {demos => app/demos}/samplesCore/composition.html (100%) rename {demos => app/demos}/samplesCore/conditional.html (100%) rename {demos => app/demos}/samplesCore/each.html (100%) rename {demos => app/demos}/samplesCore/parameters.html (100%) rename {demos => app/demos}/samplesTmplPlus/basic.html (100%) rename {demos => app/demos}/samplesTmplPlus/composition.html (100%) rename {demos => app/demos}/samplesTmplPlus/parameters.html (100%) rename {demos => app/demos}/step-by-step.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/0_local-data-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/0_local-data.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/1_remote-data-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/1_remote-data.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/2_html-tag-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/2_html-tag.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/3_if-else-tag-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/3_if-else-tag.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/4_each-tag-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/4_each-tag.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/5_javascript-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/5_javascript.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/6_hierarchical-data-source.html (100%) rename {demos => app/demos}/step-by-step/0_tmpl-read-only/6_hierarchical-data.html (100%) rename {demos => app/demos}/step-by-step/1_tmpl-interactive/0_accordion-switching-template-source.html (100%) rename {demos => app/demos}/step-by-step/1_tmpl-interactive/0_accordion-switching-template.html (100%) rename {demos => app/demos}/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag-source.html (100%) rename {demos => app/demos}/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag.html (100%) rename {demos => app/demos}/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag-source.html (100%) rename {demos => app/demos}/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag.html (100%) rename jquery.tmpl.js => app/jquery.tmpl.js (100%) rename jquery.tmplPlus.js => app/jquery.tmplPlus.js (100%) rename {tests => app/tests}/core.js (100%) rename {tests => app/tests}/index.html (100%) rename {tests => app/tests}/qunit.css (100%) rename {tests => app/tests}/qunit.js (100%) create mode 100644 bower.json rename jquery.tmpl.min.js => dist/jquery.tmpl.min.js (100%) rename jquery.tmplPlus.min.js => dist/jquery.tmplPlus.min.js (100%) diff --git a/README.md b/README.md index 3feb29c..37a4abd 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# jQuery Templates plugin vBeta1.0.0 +# jQuery Templates plugin +=========== _jQuery Templates is no longer in active development, and will be superseded by JsRender. See vBeta1.0.0 tag for released beta version. Requires jQuery version 1.4.2._ @@ -18,160 +19,27 @@ See also [http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jqu Live versions of demos from this repository can be found at [http://borismoore.github.io/jquery-tmpl/demos/step-by-step.html] (http://borismoore.github.io/jquery-tmpl/demos/step-by-step.html). -

The beta1 version of jQuery Templates is available on CDN at: -

+

+ + + + + + + Stories in Ready +

---- +

CKEditor values

+CKEditor is an Open source application, which means it can be modified any way you want. It benefits from an active community that is constantly evolving the application with free add-ons and a transparent development process. -_The following is a restoration of jQuery's official documentation on tmpl() as it was on 12/28/2012. jQuery is Copyright 2012, John Resig_ +

Dependencies

+Download make the dependencies of jQuery and include in your project +* https://jquery.com/ - -[Source](http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/ "Permalink to jQuery.tmpl() � jQuery API") - -# jQuery.tmpl( template \[, data\] \[, options\] ) Returns: jQuery - -## Description: -**Render the specified HTML content as a template, using the specified data.** version added: 1.4.3 - jQuery.tmpl( template \[, data\] \[, options\] ) - -**template** The HTML markup or text to use as a template. - -**data** The data to render. This can be any JavaScript type, including Array or Object. - -**options** An optional map of user-defined key-value pairs. Extends the `tmplItem` data structure, available to the template during rendering. - -This documentation topic concerns the *jQuery Templates* plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl. - -The `jQuery.tmpl()` method is designed for chaining with `.appendTo`, `.prependTo`, `.insertAfter` or `.insertBefore` as in the following example. - -### Example: +

Implementation

```JavaScript $.tmpl( "
  • ${Name}
    • ", { "Name" : "John Doe" }).appendTo( "#target" ); ``` -The `template` parameter can be any of the following: - -* A string containing markup. -* An HTML element (or jQuery object that wraps an element) whose content is to be used as the template. -* A string corresponding to the name of a named template (see jQuery.template() and .template()). -* A compiled-template function (see jQuery.template() and .template()). - -If `data` is an array, the template is rendered once for each data item in the array. If `data` is an object, or if the `data` parameter is missing or null, a single template item is rendered. - -The return value is a jQuery collection of elements made up of the rendered template items (one for each data item in the array). If the template contains only one top-level element, then there will be one element for each data item in the array. - -To insert the rendered template items into the HTML DOM, the returned jQuery collection should not be inserted directly into the DOM, but should be chained with `.appendTo`, `.prependTo`, `.insertAfter` or `.insertBefore`, as in following example: -```JavaScript - $.tmpl( myTemplate, myData ).appendTo( "#target" ); -``` -See also .tmpl(). - -### Example -The following example shows how to use `jQuery.tmpl()` to render local data, using a template provided as a string: -```JavaScript - var movies = [ - { Name: "The Red Violin", ReleaseYear: "1998" }, - { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, - { Name: "The Inheritance", ReleaseYear: "1976" } - ]; - - var markup = "
  • ${Name} (${ReleaseYear})
    • "; - - // Compile the markup as a named template - $.template( "movieTemplate", markup ); - - // Render the template with the movies data and insert - // the rendered HTML under the "movieList" element - $.tmpl( "movieTemplate", movies ) - .appendTo( "#movieList" ); -``` -## Using Remote Data -Typically the data is not local and is instead obtained using an Ajax request to a remote service or page, as in the following example: -```JavaScript - var markup = "
  • ${Name} (${ReleaseYear})
    • "; - - // Compile the markup as a named template - $.template( "movieTemplate", markup ); - - $.ajax({ - dataType: "jsonp", - url: moviesServiceUrl, - jsonp: "$callback", - success: showMovies - }); - - // Within the callback, use .tmpl() to render the data. - function showMovies( data ) { - // Render the template with the "movies" data and insert - // the rendered HTML under the 'movieList' element - $.tmpl( "movieTemplate", data ) - .appendTo( "#movieList" ); - } -``` -## The Markup for the Template -You can get the markup for the template from inline markup in the page, or from a string (possibly computed, or obtained remotely). For an example of how to use inline markup, see .tmpl(). - -## Caching the Template -When a template is rendered, the markup is first converted into a compiled-template function. Every time `$.tmpl( markup , myData ).appendTo( "#target" )` is called, the template is recompiled. If the same template is to be used more than once for rendering data, you should ensure that the compiled template is cached. To cache the template when using markup that is obtained from a string (rather than from inline markup in the page), use `$.template( name, markup )` to create a named template for reuse. See jQuery.template(). - -## Template Tags, Expressions, and Template Variables -Template tags such as the `${}` tag can used within jQuery templates in addition to text and HTML markup to enable a number of scenarios such as composition of templates, iteration over hierarchical data, parameterization of template rendering, etc. Template tags can render content based on the values of data item fields or template variables such as `$item` (corresponding to the template item), as well as expressions and function calls. See the documentation topics for each template tag: ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} and {{wrap}}. - -## The `options` Parameter, and Template Items -Each template item (the result of rendering a data item with the template) is associated with a `tmplItem` data structure, which can be accessed using jQuery.tmplItem() and .tmplItem(), or the `$item` template variable. Any fields or anonomyous methods passed in with the `options` parameter of `jQuery.tmpl()` will extend the `tmplItem` data structure, and so be available to the template as in the following example: -```JavaScript - var markup = "
  • Some content: ${$item.myMethod()}.
    " - + " More content: ${$item.myValue}.
    • "; - - // Compile the markup as a named template - $.template( "movieTemplate", markup ); - - // Render the template with the movies data - $.tmpl( "movieTemplate", movies, - { - myValue: "somevalue", - myMethod: function() { - return "something"; - } - } - ).appendTo( "#movieList" ); -``` -## Examples: - -### Example: Render local data using jQuery.tmpl(). -```html - - - - - - - - - - - - - - ``` ### Example: Render data from a remote service, using jQuery.tmpl(). ```html @@ -229,3 +97,13 @@ Each template item (the result of rendering a data item with the template) is as ``` + +## Bower install de dependency +``` +$ bower install jquery-tmpl --save +``` + +## Metrics + +[![Throughput Graph](https://graphs.waffle.io/miamarti/jquery-tmpl/throughput.svg)](https://waffle.io/miamarti/jquery-tmpl/metrics/throughput) + diff --git a/demos/movies/PagesCore/movies.html b/app/demos/movies/PagesCore/movies.html similarity index 100% rename from demos/movies/PagesCore/movies.html rename to app/demos/movies/PagesCore/movies.html diff --git a/demos/movies/PagesCore/moviesNoGlobals.html b/app/demos/movies/PagesCore/moviesNoGlobals.html similarity index 100% rename from demos/movies/PagesCore/moviesNoGlobals.html rename to app/demos/movies/PagesCore/moviesNoGlobals.html diff --git a/demos/movies/PagesTmplPlus/movies1.html b/app/demos/movies/PagesTmplPlus/movies1.html similarity index 100% rename from demos/movies/PagesTmplPlus/movies1.html rename to app/demos/movies/PagesTmplPlus/movies1.html diff --git a/demos/movies/PagesTmplPlus/movies2.html b/app/demos/movies/PagesTmplPlus/movies2.html similarity index 100% rename from demos/movies/PagesTmplPlus/movies2.html rename to app/demos/movies/PagesTmplPlus/movies2.html diff --git a/demos/movies/PagesTmplPlus/movies3.html b/app/demos/movies/PagesTmplPlus/movies3.html similarity index 100% rename from demos/movies/PagesTmplPlus/movies3.html rename to app/demos/movies/PagesTmplPlus/movies3.html diff --git a/demos/movies/components/jquery-ui-1.8.1.custom.js b/app/demos/movies/components/jquery-ui-1.8.1.custom.js similarity index 100% rename from demos/movies/components/jquery-ui-1.8.1.custom.js rename to app/demos/movies/components/jquery-ui-1.8.1.custom.js diff --git a/demos/movies/components/jquery-ui-1.8.1.custom.min.js b/app/demos/movies/components/jquery-ui-1.8.1.custom.min.js similarity index 100% rename from demos/movies/components/jquery-ui-1.8.1.custom.min.js rename to app/demos/movies/components/jquery-ui-1.8.1.custom.min.js diff --git a/demos/movies/components/jquery.pager.js b/app/demos/movies/components/jquery.pager.js similarity index 100% rename from demos/movies/components/jquery.pager.js rename to app/demos/movies/components/jquery.pager.js diff --git a/demos/movies/css/jquery-ui-1.8.1.custom.css b/app/demos/movies/css/jquery-ui-1.8.1.custom.css similarity index 100% rename from demos/movies/css/jquery-ui-1.8.1.custom.css rename to app/demos/movies/css/jquery-ui-1.8.1.custom.css diff --git a/demos/movies/css/movies.css b/app/demos/movies/css/movies.css similarity index 100% rename from demos/movies/css/movies.css rename to app/demos/movies/css/movies.css diff --git a/demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png b/app/demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png similarity index 100% rename from demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png rename to app/demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png diff --git a/demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png b/app/demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png similarity index 100% rename from demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png rename to app/demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png diff --git a/demos/movies/images/ui-bg_flat_0_333333_40x100.png b/app/demos/movies/images/ui-bg_flat_0_333333_40x100.png similarity index 100% rename from demos/movies/images/ui-bg_flat_0_333333_40x100.png rename to app/demos/movies/images/ui-bg_flat_0_333333_40x100.png diff --git a/demos/movies/images/ui-bg_flat_65_ffffff_40x100.png b/app/demos/movies/images/ui-bg_flat_65_ffffff_40x100.png similarity index 100% rename from demos/movies/images/ui-bg_flat_65_ffffff_40x100.png rename to app/demos/movies/images/ui-bg_flat_65_ffffff_40x100.png diff --git a/demos/movies/images/ui-bg_flat_75_ffffff_40x100.png b/app/demos/movies/images/ui-bg_flat_75_ffffff_40x100.png similarity index 100% rename from demos/movies/images/ui-bg_flat_75_ffffff_40x100.png rename to app/demos/movies/images/ui-bg_flat_75_ffffff_40x100.png diff --git a/demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png b/app/demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png similarity index 100% rename from demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png rename to app/demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png diff --git a/demos/movies/images/ui-bg_glass_75_dadada_1x400.png b/app/demos/movies/images/ui-bg_glass_75_dadada_1x400.png similarity index 100% rename from demos/movies/images/ui-bg_glass_75_dadada_1x400.png rename to app/demos/movies/images/ui-bg_glass_75_dadada_1x400.png diff --git a/demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png b/app/demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png similarity index 100% rename from demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png rename to app/demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png diff --git a/demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png b/app/demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png similarity index 100% rename from demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png rename to app/demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png diff --git a/demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png b/app/demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png similarity index 100% rename from demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png rename to app/demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png diff --git a/demos/movies/images/ui-icons_004276_256x240.png b/app/demos/movies/images/ui-icons_004276_256x240.png similarity index 100% rename from demos/movies/images/ui-icons_004276_256x240.png rename to app/demos/movies/images/ui-icons_004276_256x240.png diff --git a/demos/movies/images/ui-icons_cc0000_256x240.png b/app/demos/movies/images/ui-icons_cc0000_256x240.png similarity index 100% rename from demos/movies/images/ui-icons_cc0000_256x240.png rename to app/demos/movies/images/ui-icons_cc0000_256x240.png diff --git a/demos/movies/images/ui-icons_ffffff_256x240.png b/app/demos/movies/images/ui-icons_ffffff_256x240.png similarity index 100% rename from demos/movies/images/ui-icons_ffffff_256x240.png rename to app/demos/movies/images/ui-icons_ffffff_256x240.png diff --git a/demos/resources/demos.css b/app/demos/resources/demos.css similarity index 100% rename from demos/resources/demos.css rename to app/demos/resources/demos.css diff --git a/demos/resources/movielist.css b/app/demos/resources/movielist.css similarity index 100% rename from demos/resources/movielist.css rename to app/demos/resources/movielist.css diff --git a/demos/resources/syntaxhighlighter.css b/app/demos/resources/syntaxhighlighter.css similarity index 100% rename from demos/resources/syntaxhighlighter.css rename to app/demos/resources/syntaxhighlighter.css diff --git a/demos/resources/syntaxhighlighter.min.js b/app/demos/resources/syntaxhighlighter.min.js similarity index 100% rename from demos/resources/syntaxhighlighter.min.js rename to app/demos/resources/syntaxhighlighter.min.js diff --git a/demos/samplesCore/Interactive/resources/collapsed.png b/app/demos/samplesCore/Interactive/resources/collapsed.png similarity index 100% rename from demos/samplesCore/Interactive/resources/collapsed.png rename to app/demos/samplesCore/Interactive/resources/collapsed.png diff --git a/demos/samplesCore/Interactive/resources/empty.png b/app/demos/samplesCore/Interactive/resources/empty.png similarity index 100% rename from demos/samplesCore/Interactive/resources/empty.png rename to app/demos/samplesCore/Interactive/resources/empty.png diff --git a/demos/samplesCore/Interactive/resources/expanded.png b/app/demos/samplesCore/Interactive/resources/expanded.png similarity index 100% rename from demos/samplesCore/Interactive/resources/expanded.png rename to app/demos/samplesCore/Interactive/resources/expanded.png diff --git a/demos/samplesCore/Interactive/resources/folder.png b/app/demos/samplesCore/Interactive/resources/folder.png similarity index 100% rename from demos/samplesCore/Interactive/resources/folder.png rename to app/demos/samplesCore/Interactive/resources/folder.png diff --git a/demos/samplesCore/Interactive/resources/tabs.css b/app/demos/samplesCore/Interactive/resources/tabs.css similarity index 100% rename from demos/samplesCore/Interactive/resources/tabs.css rename to app/demos/samplesCore/Interactive/resources/tabs.css diff --git a/demos/samplesCore/Interactive/resources/treeView.css b/app/demos/samplesCore/Interactive/resources/treeView.css similarity index 100% rename from demos/samplesCore/Interactive/resources/treeView.css rename to app/demos/samplesCore/Interactive/resources/treeView.css diff --git a/demos/samplesCore/Interactive/tabsTmpl.html b/app/demos/samplesCore/Interactive/tabsTmpl.html similarity index 100% rename from demos/samplesCore/Interactive/tabsTmpl.html rename to app/demos/samplesCore/Interactive/tabsTmpl.html diff --git a/demos/samplesCore/Interactive/tabsWrap.html b/app/demos/samplesCore/Interactive/tabsWrap.html similarity index 100% rename from demos/samplesCore/Interactive/tabsWrap.html rename to app/demos/samplesCore/Interactive/tabsWrap.html diff --git a/demos/samplesCore/Interactive/tabsWrapImperative.html b/app/demos/samplesCore/Interactive/tabsWrapImperative.html similarity index 100% rename from demos/samplesCore/Interactive/tabsWrapImperative.html rename to app/demos/samplesCore/Interactive/tabsWrapImperative.html diff --git a/demos/samplesCore/Interactive/tabsWrapNested.html b/app/demos/samplesCore/Interactive/tabsWrapNested.html similarity index 100% rename from demos/samplesCore/Interactive/tabsWrapNested.html rename to app/demos/samplesCore/Interactive/tabsWrapNested.html diff --git a/demos/samplesCore/Interactive/treeView.html b/app/demos/samplesCore/Interactive/treeView.html similarity index 100% rename from demos/samplesCore/Interactive/treeView.html rename to app/demos/samplesCore/Interactive/treeView.html diff --git a/demos/samplesCore/basic.html b/app/demos/samplesCore/basic.html similarity index 100% rename from demos/samplesCore/basic.html rename to app/demos/samplesCore/basic.html diff --git a/demos/samplesCore/composition.html b/app/demos/samplesCore/composition.html similarity index 100% rename from demos/samplesCore/composition.html rename to app/demos/samplesCore/composition.html diff --git a/demos/samplesCore/conditional.html b/app/demos/samplesCore/conditional.html similarity index 100% rename from demos/samplesCore/conditional.html rename to app/demos/samplesCore/conditional.html diff --git a/demos/samplesCore/each.html b/app/demos/samplesCore/each.html similarity index 100% rename from demos/samplesCore/each.html rename to app/demos/samplesCore/each.html diff --git a/demos/samplesCore/parameters.html b/app/demos/samplesCore/parameters.html similarity index 100% rename from demos/samplesCore/parameters.html rename to app/demos/samplesCore/parameters.html diff --git a/demos/samplesTmplPlus/basic.html b/app/demos/samplesTmplPlus/basic.html similarity index 100% rename from demos/samplesTmplPlus/basic.html rename to app/demos/samplesTmplPlus/basic.html diff --git a/demos/samplesTmplPlus/composition.html b/app/demos/samplesTmplPlus/composition.html similarity index 100% rename from demos/samplesTmplPlus/composition.html rename to app/demos/samplesTmplPlus/composition.html diff --git a/demos/samplesTmplPlus/parameters.html b/app/demos/samplesTmplPlus/parameters.html similarity index 100% rename from demos/samplesTmplPlus/parameters.html rename to app/demos/samplesTmplPlus/parameters.html diff --git a/demos/step-by-step.html b/app/demos/step-by-step.html similarity index 100% rename from demos/step-by-step.html rename to app/demos/step-by-step.html diff --git a/demos/step-by-step/0_tmpl-read-only/0_local-data-source.html b/app/demos/step-by-step/0_tmpl-read-only/0_local-data-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/0_local-data-source.html rename to app/demos/step-by-step/0_tmpl-read-only/0_local-data-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/0_local-data.html b/app/demos/step-by-step/0_tmpl-read-only/0_local-data.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/0_local-data.html rename to app/demos/step-by-step/0_tmpl-read-only/0_local-data.html diff --git a/demos/step-by-step/0_tmpl-read-only/1_remote-data-source.html b/app/demos/step-by-step/0_tmpl-read-only/1_remote-data-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/1_remote-data-source.html rename to app/demos/step-by-step/0_tmpl-read-only/1_remote-data-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/1_remote-data.html b/app/demos/step-by-step/0_tmpl-read-only/1_remote-data.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/1_remote-data.html rename to app/demos/step-by-step/0_tmpl-read-only/1_remote-data.html diff --git a/demos/step-by-step/0_tmpl-read-only/2_html-tag-source.html b/app/demos/step-by-step/0_tmpl-read-only/2_html-tag-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/2_html-tag-source.html rename to app/demos/step-by-step/0_tmpl-read-only/2_html-tag-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/2_html-tag.html b/app/demos/step-by-step/0_tmpl-read-only/2_html-tag.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/2_html-tag.html rename to app/demos/step-by-step/0_tmpl-read-only/2_html-tag.html diff --git a/demos/step-by-step/0_tmpl-read-only/3_if-else-tag-source.html b/app/demos/step-by-step/0_tmpl-read-only/3_if-else-tag-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/3_if-else-tag-source.html rename to app/demos/step-by-step/0_tmpl-read-only/3_if-else-tag-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/3_if-else-tag.html b/app/demos/step-by-step/0_tmpl-read-only/3_if-else-tag.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/3_if-else-tag.html rename to app/demos/step-by-step/0_tmpl-read-only/3_if-else-tag.html diff --git a/demos/step-by-step/0_tmpl-read-only/4_each-tag-source.html b/app/demos/step-by-step/0_tmpl-read-only/4_each-tag-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/4_each-tag-source.html rename to app/demos/step-by-step/0_tmpl-read-only/4_each-tag-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/4_each-tag.html b/app/demos/step-by-step/0_tmpl-read-only/4_each-tag.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/4_each-tag.html rename to app/demos/step-by-step/0_tmpl-read-only/4_each-tag.html diff --git a/demos/step-by-step/0_tmpl-read-only/5_javascript-source.html b/app/demos/step-by-step/0_tmpl-read-only/5_javascript-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/5_javascript-source.html rename to app/demos/step-by-step/0_tmpl-read-only/5_javascript-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/5_javascript.html b/app/demos/step-by-step/0_tmpl-read-only/5_javascript.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/5_javascript.html rename to app/demos/step-by-step/0_tmpl-read-only/5_javascript.html diff --git a/demos/step-by-step/0_tmpl-read-only/6_hierarchical-data-source.html b/app/demos/step-by-step/0_tmpl-read-only/6_hierarchical-data-source.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/6_hierarchical-data-source.html rename to app/demos/step-by-step/0_tmpl-read-only/6_hierarchical-data-source.html diff --git a/demos/step-by-step/0_tmpl-read-only/6_hierarchical-data.html b/app/demos/step-by-step/0_tmpl-read-only/6_hierarchical-data.html similarity index 100% rename from demos/step-by-step/0_tmpl-read-only/6_hierarchical-data.html rename to app/demos/step-by-step/0_tmpl-read-only/6_hierarchical-data.html diff --git a/demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template-source.html b/app/demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template-source.html similarity index 100% rename from demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template-source.html rename to app/demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template-source.html diff --git a/demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template.html b/app/demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template.html similarity index 100% rename from demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template.html rename to app/demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template.html diff --git a/demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag-source.html b/app/demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag-source.html similarity index 100% rename from demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag-source.html rename to app/demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag-source.html diff --git a/demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag.html b/app/demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag.html similarity index 100% rename from demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag.html rename to app/demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag.html diff --git a/demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag-source.html b/app/demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag-source.html similarity index 100% rename from demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag-source.html rename to app/demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag-source.html diff --git a/demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag.html b/app/demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag.html similarity index 100% rename from demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag.html rename to app/demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag.html diff --git a/jquery.tmpl.js b/app/jquery.tmpl.js similarity index 100% rename from jquery.tmpl.js rename to app/jquery.tmpl.js diff --git a/jquery.tmplPlus.js b/app/jquery.tmplPlus.js similarity index 100% rename from jquery.tmplPlus.js rename to app/jquery.tmplPlus.js diff --git a/tests/core.js b/app/tests/core.js similarity index 100% rename from tests/core.js rename to app/tests/core.js diff --git a/tests/index.html b/app/tests/index.html similarity index 100% rename from tests/index.html rename to app/tests/index.html diff --git a/tests/qunit.css b/app/tests/qunit.css similarity index 100% rename from tests/qunit.css rename to app/tests/qunit.css diff --git a/tests/qunit.js b/app/tests/qunit.js similarity index 100% rename from tests/qunit.js rename to app/tests/qunit.js diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..11dbdde --- /dev/null +++ b/bower.json @@ -0,0 +1,34 @@ +{ + "name": "jquery-tmpl", + "description": "jQuery Templates plugin", + "version": "1.0.0", + "keywords": [ + "jquery", + "templates", + "plugin" + ], + "homepage": "", + "main": "dist/jquery.tmpl.min.js", + "ignore": [ + "/.*", + "**/.*", + "build", + "speed", + "test", + "*.md" + ], + "authors": [ + { + "name": "Boris Moore", + "email": "borismoore@gmail.com;", + "homepage": "http://www.jsviews.com/" + }, { + "name": "Miller Augusto S. Martins", + "email": "miller.augusto@gmail.com", + "homepage": "http://br.linkedin.com/pub/miller-augusto/2a/38b/832/" + } + ], + "dependencies": { + "jquery": ">= 1.9.1" + } +} diff --git a/jquery.tmpl.min.js b/dist/jquery.tmpl.min.js similarity index 100% rename from jquery.tmpl.min.js rename to dist/jquery.tmpl.min.js diff --git a/jquery.tmplPlus.min.js b/dist/jquery.tmplPlus.min.js similarity index 100% rename from jquery.tmplPlus.min.js rename to dist/jquery.tmplPlus.min.js From 2a09c78ce8955919bb6aa947f3d2e24fe1e3535b Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:35:46 -0200 Subject: [PATCH 02/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 37a4abd..da36f56 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Live versions of demos from this repository can be found at [http://borismoore.g

    - + From 9c1e72e7b9b51451fd16626d85615bf7e8af12ea Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:39:20 -0200 Subject: [PATCH 03/10] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index da36f56..e3cf65d 100644 --- a/README.md +++ b/README.md @@ -21,8 +21,8 @@ Live versions of demos from this repository can be found at [http://borismoore.g

    - - + + From 51df70f5f6ed9fdaf4f90a654a0dbf19ee1e729f Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:42:46 -0200 Subject: [PATCH 04/10] Update README.md --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index e3cf65d..5090946 100644 --- a/README.md +++ b/README.md @@ -21,11 +21,6 @@ Live versions of demos from this repository can be found at [http://borismoore.g

    - - - - - Stories in Ready

    From a7142fe153684be3521c4812ec8d14e50ccfb83a Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:45:57 -0200 Subject: [PATCH 05/10] Update bower.json --- bower.json | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 11dbdde..5565918 100644 --- a/bower.json +++ b/bower.json @@ -20,8 +20,20 @@ "authors": [ { "name": "Boris Moore", - "email": "borismoore@gmail.com;", + "email": "borismoore@gmail.com", "homepage": "http://www.jsviews.com/" + }, { + "name": "Richard D. Worth", + "email": "rdworth@gmail.com", + "homepage": "" + }, { + "name": "Scott González", + "email": "scott.gonzalez@gmail.com", + "homepage": "http://nemikor.com/" + }, { + "name": "John Resig", + "email": "jeresig@gmail.com", + "homepage": "http://ejohn.org/" }, { "name": "Miller Augusto S. Martins", "email": "miller.augusto@gmail.com", From a62884e02cd9881869ef0ffd9482f74de99227d2 Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:49:32 -0200 Subject: [PATCH 06/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5090946..1d375f8 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ Download make the dependencies of jQuery and include in your project ## Bower install de dependency ``` -$ bower install jquery-tmpl --save +$ bower install jquery.tmpl --save ``` ## Metrics From ab20494b68cd7d3a4f5dc01ec3d93ce70d5c15c0 Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:57:24 -0200 Subject: [PATCH 07/10] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1d375f8..e16b6dc 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,8 @@ Download make the dependencies of jQuery and include in your project ```JavaScript $.tmpl( "
  • ${Name}
    • ", { "Name" : "John Doe" }).appendTo( "#target" ); ``` -``` + + ### Example: Render data from a remote service, using jQuery.tmpl(). ```html From 6a4fc840c495164f0d0124e5937a0b21c9461648 Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 14:59:34 -0200 Subject: [PATCH 08/10] Update README.md --- README.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e16b6dc..8ee767f 100644 --- a/README.md +++ b/README.md @@ -31,9 +31,9 @@ CKEditor is an Open source application, which means it can be modified any way y Download make the dependencies of jQuery and include in your project * https://jquery.com/ -

    Implementation

    -```JavaScript - $.tmpl( "
  • ${Name}
    • ", { "Name" : "John Doe" }).appendTo( "#target" ); +### Bower install de dependency +``` +$ bower install jquery.tmpl --save ``` @@ -94,10 +94,7 @@ Download make the dependencies of jQuery and include in your project ``` -## Bower install de dependency -``` -$ bower install jquery.tmpl --save -``` + ## Metrics From 19019ced338f0e47af5bf7a285786f6a31e7ad62 Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 15:01:51 -0200 Subject: [PATCH 09/10] Update README.md --- README.md | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 160 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 8ee767f..88f12f4 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,13 @@ _jQuery Templates is no longer in active development, and will be superseded by JsRender. See vBeta1.0.0 tag for released beta version. Requires jQuery version 1.4.2._ + +

    + + Stories in Ready +

    + + ---- _Note: This is the original official jQuery Templates plugin. The project was maintained by the jQuery team as an official jQuery plugin. Since the jQuery team has decided not to take this plugin past beta, it has been returned to the principal developer's GitHub account (Boris Moore). For more information on the history of jQuery Templates, and the roadmap going forward, see jQuery Templates and JsViews: The Roadmap_ @@ -19,17 +26,35 @@ See also [http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jqu Live versions of demos from this repository can be found at [http://borismoore.github.io/jquery-tmpl/demos/step-by-step.html] (http://borismoore.github.io/jquery-tmpl/demos/step-by-step.html). -

    - - Stories in Ready -

    +

    The beta1 version of jQuery Templates is available on CDN at: +

    + +--- + +_The following is a restoration of jQuery's official documentation on tmpl() as it was on 12/28/2012. jQuery is Copyright 2012, John Resig_ + + +[Source](http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/ "Permalink to jQuery.tmpl() � jQuery API") + +# jQuery.tmpl( template \[, data\] \[, options\] ) Returns: jQuery + +## Description: +**Render the specified HTML content as a template, using the specified data.** version added: 1.4.3 + jQuery.tmpl( template \[, data\] \[, options\] ) + +**template** The HTML markup or text to use as a template. -

    CKEditor values

    -CKEditor is an Open source application, which means it can be modified any way you want. It benefits from an active community that is constantly evolving the application with free add-ons and a transparent development process. +**data** The data to render. This can be any JavaScript type, including Array or Object. + +**options** An optional map of user-defined key-value pairs. Extends the `tmplItem` data structure, available to the template during rendering. + +This documentation topic concerns the *jQuery Templates* plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl. + +The `jQuery.tmpl()` method is designed for chaining with `.appendTo`, `.prependTo`, `.insertAfter` or `.insertBefore` as in the following example. -

    Dependencies

    -Download make the dependencies of jQuery and include in your project -* https://jquery.com/ ### Bower install de dependency ``` @@ -37,6 +62,132 @@ $ bower install jquery.tmpl --save ``` +### Example: +```JavaScript + $.tmpl( "
  • ${Name}
    • ", { "Name" : "John Doe" }).appendTo( "#target" ); +``` +The `template` parameter can be any of the following: + +* A string containing markup. +* An HTML element (or jQuery object that wraps an element) whose content is to be used as the template. +* A string corresponding to the name of a named template (see jQuery.template() and .template()). +* A compiled-template function (see jQuery.template() and .template()). + +If `data` is an array, the template is rendered once for each data item in the array. If `data` is an object, or if the `data` parameter is missing or null, a single template item is rendered. + +The return value is a jQuery collection of elements made up of the rendered template items (one for each data item in the array). If the template contains only one top-level element, then there will be one element for each data item in the array. + +To insert the rendered template items into the HTML DOM, the returned jQuery collection should not be inserted directly into the DOM, but should be chained with `.appendTo`, `.prependTo`, `.insertAfter` or `.insertBefore`, as in following example: +```JavaScript + $.tmpl( myTemplate, myData ).appendTo( "#target" ); +``` +See also .tmpl(). + +### Example +The following example shows how to use `jQuery.tmpl()` to render local data, using a template provided as a string: +```JavaScript + var movies = [ + { Name: "The Red Violin", ReleaseYear: "1998" }, + { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, + { Name: "The Inheritance", ReleaseYear: "1976" } + ]; + + var markup = "
  • ${Name} (${ReleaseYear})
    • "; + + // Compile the markup as a named template + $.template( "movieTemplate", markup ); + + // Render the template with the movies data and insert + // the rendered HTML under the "movieList" element + $.tmpl( "movieTemplate", movies ) + .appendTo( "#movieList" ); +``` +## Using Remote Data +Typically the data is not local and is instead obtained using an Ajax request to a remote service or page, as in the following example: +```JavaScript + var markup = "
  • ${Name} (${ReleaseYear})
    • "; + + // Compile the markup as a named template + $.template( "movieTemplate", markup ); + + $.ajax({ + dataType: "jsonp", + url: moviesServiceUrl, + jsonp: "$callback", + success: showMovies + }); + + // Within the callback, use .tmpl() to render the data. + function showMovies( data ) { + // Render the template with the "movies" data and insert + // the rendered HTML under the 'movieList' element + $.tmpl( "movieTemplate", data ) + .appendTo( "#movieList" ); + } +``` +## The Markup for the Template +You can get the markup for the template from inline markup in the page, or from a string (possibly computed, or obtained remotely). For an example of how to use inline markup, see .tmpl(). + +## Caching the Template +When a template is rendered, the markup is first converted into a compiled-template function. Every time `$.tmpl( markup , myData ).appendTo( "#target" )` is called, the template is recompiled. If the same template is to be used more than once for rendering data, you should ensure that the compiled template is cached. To cache the template when using markup that is obtained from a string (rather than from inline markup in the page), use `$.template( name, markup )` to create a named template for reuse. See jQuery.template(). + +## Template Tags, Expressions, and Template Variables +Template tags such as the `${}` tag can used within jQuery templates in addition to text and HTML markup to enable a number of scenarios such as composition of templates, iteration over hierarchical data, parameterization of template rendering, etc. Template tags can render content based on the values of data item fields or template variables such as `$item` (corresponding to the template item), as well as expressions and function calls. See the documentation topics for each template tag: ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} and {{wrap}}. + +## The `options` Parameter, and Template Items +Each template item (the result of rendering a data item with the template) is associated with a `tmplItem` data structure, which can be accessed using jQuery.tmplItem() and .tmplItem(), or the `$item` template variable. Any fields or anonomyous methods passed in with the `options` parameter of `jQuery.tmpl()` will extend the `tmplItem` data structure, and so be available to the template as in the following example: +```JavaScript + var markup = "
  • Some content: ${$item.myMethod()}.
    " + + " More content: ${$item.myValue}.
    • "; + + // Compile the markup as a named template + $.template( "movieTemplate", markup ); + + // Render the template with the movies data + $.tmpl( "movieTemplate", movies, + { + myValue: "somevalue", + myMethod: function() { + return "something"; + } + } + ).appendTo( "#movieList" ); +``` +## Examples: + +### Example: Render local data using jQuery.tmpl(). +```html + + + + + + + + +
      + + + + + +``` ### Example: Render data from a remote service, using jQuery.tmpl(). ```html @@ -99,4 +250,3 @@ $ bower install jquery.tmpl --save ## Metrics [![Throughput Graph](https://graphs.waffle.io/miamarti/jquery-tmpl/throughput.svg)](https://waffle.io/miamarti/jquery-tmpl/metrics/throughput) - From 7a4fd938658a2da10f0c15dc35be495629a3a090 Mon Sep 17 00:00:00 2001 From: Miller Augusto Date: Tue, 24 Jan 2017 15:04:11 -0200 Subject: [PATCH 10/10] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 5565918..cf1fff3 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "jquery-tmpl", "description": "jQuery Templates plugin", - "version": "1.0.0", + "version": "1.1.0", "keywords": [ "jquery", "templates",