borismoore/jsrender

A lightweight, powerful and highly extensible templating engine. In the browser or on Node.js, with or without jQuery.

JsRender: best-of-breed templating

Simple and intuitive, powerful and extensible, lightning fast

For templated content in the browser or on Node.js (with Express 4, Hapi and Browserify integration)

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.

JsRender and JsViews together provide the next-generation implementation of the official jQuery plugins JQuery Templates, and JQuery Data Link -- and supersede those libraries.

Documentation and downloads

Documentation, downloads, samples and API docs and tutorials are available on the www.jsviews.com website.

The content of this ReadMe is available also as a JsRender Quickstart.

JsRender and JsViews

JsRender is used for data-driven rendering of templates to strings, ready for insertion in the DOM.

It is also used by the 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.

JsRender installation

jsrender.js is available from downloads on the jsviews.com site.

CDN delivery is available from the cdnjs CDN at cdnjs.com/libraries/jsrender.

Alternatively:

• It can be installed with Bower, using $ bower install jsrender
• It can be loaded using an AMD script loader, such as RequireJS
• For installation using Node.js (npm) see JsRender Node.js Quickstart
• (For browser loading using Browserify or webpack - see JsRender Node.js Quickstart, JsRender as a Browserify module and JsRender as a webpack module)

Using JsRender with jQuery

When jQuery is present, JsRender loads as a jQuery plugin and adds $.views, $.templates and $.render to the jQuery namespace object, $ (or window.jQuery).

Example HTML page: JsRender with jQuery

Using JsRender without jQuery

When jQuery is not present, JsRender provides its own global namespace object: jsrender (or window.jsrender)

The 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:

var $ = window.jsrender;

// Now use code as in samples/examples, with $.views... $.templates... $.render...

(Note: If jQuery is not loaded, then passing a jQuery selector to $.templates() will only work for the ID selector)

Example HTML page: JsRender without jQuery

JsRender on Node.js

JsRender 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.

It 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.

Learn more: JsRender Node.js Quickstart and JsRender APIs for Node.js.

Code samples: See JsRender Node Starter for running code examples of Node.js scenarios, including with Express, Hapi and Browserify.

JsRender usage

Define a template

From a string:

var tmpl = $.templates("Name: {{:name}}");

From a template declared as markup in a script block:

<script id="myTemplate" type="text/x-jsrender">
Name: {{:name}}
</script>

then, somewhere in your script:

var tmpl = $.templates("#myTemplate"); // Pass in a jQuery selector for the script block

On Node.js, from an .html file containing the template markup:

var $ = require('jsrender'); // returns the jsrender namespace object
var tmpl = $.templates("./templates/myTemplate.html");

Learn more...

Render a template

tmpl.render(object) (or shortcut form: tmpl(object)) renders the template with the object as data context.

var tmpl = $.templates(" Name: {{:name}}<br/> ");

var person = {name: "Jim"};

// Render template for person object
var html = tmpl.render(person); // ready for insertion, e.g $("#result").html(html);

// result: "Name: Jim<br/> "

tmpl.render(array) (or tmpl(array)) renders the template once for each item in the array.

var people = [{name: "Jim"}, {name: "Pedro"}];

// Render template for people array
var html = tmpl.render(people); // ready for insertion...

// result: "Name: Jim<br/> Name: Pedro<br/> "

Learn more...

Register a named template - and render it

// Register named template - "myTmpl1
$.templates("myTmpl1", "Name: {{:name}}<br/> ");

var person = {name: "Jim"};

// Render named template
var html = $.templates.myTmpl1(person);

// Alternative syntax: var html = $.render.myTmpl1(person);

// result: "Name: Jim<br/> "

Learn more...

Template tags

Template tag syntax

• All tags other than {{: ...}} {{> ...}} {{* ...}} {{!-- --}} behave as block tags

• Block tags can have content, unless they use the self-closing syntax:

  • Block tag - with content: {{someTag ...}} content {{/someTag}}
  • Self-closing tag - no content (empty): {{someTag .../}}

• 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:

  • Self-closing block tag referencing an external template: {{someTag ... tmpl=.../}} (This lets you do template composition. See example.)

• Tags can take both unnamed arguments and named parameters:

  • {{someTag argument1 param1=...}} content {{/someTag}}
  • an example of a named parameter is the tmpl=... parameter mentioned above
  • 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()

Learn more...

Built-in tags

{{: ...}} (Evaluate)

{{: pathOrExpr}} inserts the value of the path or expression.

var data = {address: {street: "Main Street"} };
var tmpl = $.templates("<b>Street:</b> {{:address.street}}");
var html = tmpl.render(data);

// result: "<b>Street:</b> Main Street"

Learn more...

{{> ...}} (HTML-encode)

{{> pathOrExpr}} inserts the HTML-encoded value of the path or expression.

var data = {condition: "a < b"};
var tmpl = $.templates("<b>Formula:</b> {{>condition}}");
var html = tmpl.render(data);

// result: "<b>Formula:</b> a &lt; b"

Learn more...

{{include ...}} (Template composition - partials)

{{include pathOrExpr}}...{{/include}}evaluates the block content against a specified/modified data context.

{{include ... tmpl=.../}} evaluates the specified template against an (optionally modified) context, and inserts the result. (Template composition).

var data = {name: "Jim", address: {street: "Main Street"} };

// Register two named templates
$.templates({
  streetTmpl: "<i>{{:street}}</i>",
  addressTmpl: "{{:name}}'s address is {{include address tmpl='streetTmpl'/}}."
});

// Render outer template
var html = $.templates.addressTmpl(data);

// result: "Jim's address is <i>Main Street</i>"

Learn more...

{{for ...}} (Template composition, with iteration over arrays)

{{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.

{{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.

<script id="peopleTmpl" type="text/x-jsrender">
  <ul>{{for people}}
    <li>Name: {{:name}}</li>
  {{/for}}</ul>
</script>

var data = {people: [{name: "Jim"}, {name: "Pedro"}] };
var tmpl = $.templates("#peopleTmpl");
var html = tmpl.render(data);

// result: "<ul> <li>Name: Jim</li> <li>Name: Pedro</li> </ul>"

Learn more...

{{props ...}} (Iteration over properties of an object)

{{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}.

<script id="personTmpl" type="text/x-jsrender">
  <ul>{{props person}}
    <li>{{:key}}: {{:prop}}</li>
  {{/props}}</ul>
</script>

var data = {person: {first: "Jim", last: "Varsov"} };
var tmpl = $.templates("#personTmpl");
var html = tmpl.render(data);

// result: "<ul> <li>first: Jim</li> <li>last: Varsov</li> </ul>"

Learn more...

{{if ...}} (Conditional inclusion)

{{if pathOrExpr}}...{{/if}} or {{if pathOrExpr tmpl=.../}} renders the content/template only if the evaluated path or expression is 'truthy'.

{{if pathOrExpr}}...{{else pathOrExpr2}}...{{else}}...{{/if}} behaves as 'if' - 'else if' - 'else' and renders each block based on the conditions.

<script id="personTmpl" type="text/x-jsrender">
  {{if nickname}}
    Nickname: {{:nickname}}
  {{else name}}
    Name: {{:name}}
  {{else}}
    No name provided
  {{/if}}
</script>

var data = {nickname: "Jim", name: "James"};
var tmpl = $.templates("#personTmpl");
var html = tmpl.render(data);

// result: "Nickname: Jim"

Learn more...

Other built-in tags

For details on all the above built-in tags, as well as comment tags {{!-- ... --}} and allow code tags {{* ... }} and {{*: ...}}, see the tags documentation on jsviews.com.

Custom tags

Creating your own custom tags is easy. You can provide an object, with render method, template, event handlers, etc. See samples here and here on jsviews.com. But for simple tags, you may only need a simple render function, or a template string.

For example the two following definitions for a {{fullName/}} tag provide equivalent behavior:

As a render function:

$.views.tags("fullName", function(val) {
  return val.first + " " + val.last;
});

Or as a template string:

$.views.tags("fullName", "{{:first}} {{:last}}");

Either way, the result will be as follows:

var tmpl = $.templates("{{fullName person/}}");
var data = {person: {first: "Jim", last: "Varsov"}};
var html = tmpl.render(data);

// result: "Jim Varsov"

Helpers

For details on helpers, see the Helpers documentation topic on jsviews.com.

Here is a simple example. Two helpers - a function, and a string:

var myHelpers = {
  upper: function(val) { return val.toUpperCase(); },
  title: "Sir"
};

Access the helpers using the ~myhelper syntax:

var tmpl = $.templates("{{:~title}} {{:first}} {{:~upper(last)}}");

We can pass the helpers in with the render() method

var data = {first: "Jim", last: "Varsov"};

var html = tmpl.render(data, myHelpers);

// result: "Sir Jim VARSOV"

Or we can register helpers globally:

$.views.helpers(myHelpers);

var data = {first: "Jim", last: "Varsov"};
var html = tmpl.render(data);

// result: "Sir Jim VARSOV"

Learn more...

Converters

Converters are used with the {{:...}} tag, using the syntax {{mycvtr: ...}}}.

Example - an upper converter, to convert to upper case:

$.views.converters("upper", function(val) { return val.toUpperCase(); });

var tmpl = $.templates("{{:first}} {{upper:last}}");
var data = {first: "Jim", last: "Varsov"};
var html = tmpl.render(data);

// result: "Jim VARSOV"

Learn more...

Logic and expressions

JsRender 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.

You can assign rich expressions to any template arguments or parameters, as in:

{{:person.nickname ? "Nickname: " + person.nickname : "(has no nickname)"}}

or

{{if ~limits.maxVal > (product.price*100 - discount)/rate}}
  ...
{{else ~limits.minVal < product.price}}
  ... 
{{else}}
  ... 
{{/if}}

Documentation and APIs

See the www.jsviews.com site, including the JsRender Quickstart and JsRender APIs topics.

Demos

Demos and samples can be found at www.jsviews.com/#samples, and throughout the API documentation.

(See also the demos folder of the GitHub repository - available here as live samples).

jsrender's Issues

Question on Numbers

HI Boris,

BTW Very cool library:

If I had data like { name:"just_dog", age:7 }

How could age (as a number) be used in a template:

Age: {{=age}}

All the best
Chris

Suggestion: More intuitive syntax for simple if comparisons

The syntax for implementing simple comparisons is overly complex and I think there should be simpler method for adding simple comparisons to your template code.

For example, in jquery.tmpl, you could do:

<div class="base{{if varName == 'None'}} none{{/if}}">${varName}</div>

However, this simple comparison is much more difficult in the new engine. First, you've got to set:

$.views.allowCode = true;

And then your template ends up looking something like this:

<div class="base{{* if($view.data.varName == 'None'){ result += ' none';  } }}">{{=varName}}</div>

This is quite a bit more complicated to implement and much more difficult to interpret.

Any chance of being able to implement something like:

<div class="base{{#if equals(varName, 'None')}} none{{/if}}">{{=varName}}</div>

Where we have some functional helpers like equals(), not(), gt(), lt(), gte(), lte()--and with the potential to define more helper functions.

I can understand dropping to code view for more complex operations, but it seems like there should be a way to at least perform some simple comparisons w/out having to drop to the overly complex code syntax.

Using appendTo vs. html

I usually list the field names in the table and then fill the table using jquery templates. With jsrender the appendTo doesn't seem to be working. Maybe I'm going about it wrong?

This works but removes my table header row:
$("#tblMostActiveUsers").html($("#MostActiveUsersTemplate").render(data.d));

This doesn't work in jsrender:

$("#tblMostActiveUsers").appendTo($("#MostActiveUsersTemplate").render(data.d));

Thanks for any help!
Craig

$.template returns an object instead of a function

Everything works perfectly on the main page, but when I browse the contact page the plugin does not work:

Error message in console (contact page):

Uncaught TypeError: object is not a function
jquery.tmpl.js:329

Uncaught Template command not found: getDay
js:2000

The tag is registered! I have nothing unusual about the contact page (no javascript nothing but jsrender)

See images: http://imgur.com/a/LwXDn#0

See the complete question: http://stackoverflow.com/questions/8084036/template-returns-an-object-instead-of-a-function

How to access $value with new syntax

In jQuery templates, I could use $value to get the value of an item in a list, for example. I can't manage to figure out how to do that with the jsRender templates.

For example, given this list:
['dogs', 'cats', 'monkeys']

and this template:

<script id="log-tags-tmpl" type="text/x-jquery-tmpl">

{{=$value }}

</script>

What should go instead of {{=$value }}?

I've looked through the demos but don't think I saw an example using a flat list. Thanks!

Consider supporting paths that access arrays

{{=languages.0.name}}
See issue.

object['key'] syntax in templates

I have to deal with a key with a period in the name ("Scope.Name") and it would be great to access it within a template like this.

Attributes["Scope.Name"].value 

in the meantime i'm using this to get the job done.

{{#each Assets}}
    {{* var $row = $view.parent.data[$view.itemNumber-1]; }}
        <li>{{=$itemNumber}}</li>
        <li>{{=Attributes.Name.value}}</li>
        <li>{{* result += $row.Attributes["Scope.Name"].value; }}</li>  
{{/each}}

Clarify license

jquery-tmpl was dual-licensed via the MIT and GPL2 licenses. I'm guessing that your code is also, but I think it would be good to clarify this point. Will you add a license to the code?

access iteration index

it would be nice to have access from within a template to the current iteration index, e.g. {{=$ctx.index}}

some use cases:

• output a numbered data list
• limit to the top 10
• enable pagination for data tables (only show entries from 1-3, 4-6, etc.)

the index could always be stored in the data before hand, but there should not be a correlation between display position and data, e.g. a filtered data table, whose first result may not be the first data entry.

$.views.setDelimiters bug...

Hi Boris,

just noticed that if I set the delimiters with 2 different characters, like for example "<%" and "%>", it doesn't work.

the problem is probably located on line 170-171

    setDelimiters: function( openTag, closeTag ) {
        // Set or modify the delimiter characters for tags: "{{" and "}}"
        var firstCloseChar = closeTag.charAt( 1 ),
            secondCloseChar = closeTag.charAt( 0 );
        openTag = "\\" + openTag.charAt( 0 ) + "\\" + openTag.charAt( 1 );
        closeTag = "\\" + firstCloseChar + "\\" + secondCloseChar;

---

I presume you wished to type:
var firstCloseChar = closeTag.charAt( 0 ),
secondCloseChar = closeTag.charAt( 1 );

with this little fix, it works.

nested templates without a specified data object

In jQuery templates, one could call a nested template without specifying a data object (example: {{tmpl '#myTemplate'}}), which was useful. In jsrender, this does not appear to work and fails with the error 'current is undefined'. I've seen this in two places:

1. A plain template call: {{tmpl='#myTemplate'}}
2. In an {{else}} tag. In your 'helper functions' demo, you show an example of calling a nested template from an {{if}} tag (line 19 and 22), which is cool. Unfortunately, doing this with an {{else}} tag (equivalent of 'elseif') gives the 'current is undefined' error.

Thanks for all your great work, Boris!

Carriage return char not escaped in Internet Explorer

I had an issue where a carriage return character was finding its way into the parsed template and in Internet Explorer I'd get an error at line 545 complaining of an unterminated string which on inspection turned out to be a " followed by an unescaped \r.

My workaround was chnaging line 406 to the following:

content.push( markup.substr( loc, shift ).replace( rNewLine,"\n").replace("\r", "\n"));

Unfortunately I haven't had time to replicate this small-scale yet but I'm posting an issue in case it's something obvious that you can fix.

No way of rendering enumerated objects

Sometimes you get an JSON object like this (copied from firebug):

link [Object { title="Inicio", url=""}, Object { title="Ciudad", url="ciudad.php", sublink=[11]}, Object { title="Tramites", url="#"}, 3
0 Object { title="Inicio", url=""}
1 Object { title="Ciudad", url="ciudad.php", sublink=[11]}
2 Object { title="Tramites", url="#"}
3 Object { title="Noticias", url="#"}
4 Object { title="Calendario", url="#"}
5 Object { title="Sobre Nosotros", url="#"}

Where you get an index for an object instead of the object itself. In order to access the properties of the object, you need to reference this index.

I dont know if there is a way to get the length of the object and iterate it.

What are your comments.

Small syntax errors

Been giving this a little try and found 2 small syntax errors:

Changed:
tmpl = buildTmplFn(tmpl)

To:
tmpl = buildTmplFn(tmpl);

And:
content = self.tmpl($, self);

To:
var content = self.tmpl($, self);

Will come back for some question, tho now i gotta get back to work :)

Robert

activeViews with <col> fails without <colgroup>

If creating a table template with <col> tags without <colgroup>, the browser will force to add a <colgroup> around <col>.

The active view comments get messed up causing a JavaScript error, not able to find the correct data for the template.

---

<table>
{{each columns tmpl=templateCol}}
…
</table>

templateCol is:
<col />

The output on the page is:
<!--tmpl() _0-->
<table>
<!--tmpl($data.columns) _1-->
<!--item-->
<colgroup>
<col>
<!--/item-->
<!--item-->
<col>
<!--/item-->
<!--/tmpl-->
</colgroup>
</table>
<!--/tmpl-->

Why not just a single notation {{... and with /}} for no block tag

Right now, {{#... is for block tags, and {{... is for not block tag, but why not having just one notation {{... and when there is no content, we just end it with /}}.

I think that this notation would be more familiar to developers (as it is similar to xml), and will simplify the notation.

Template is not rendered for null value in array

I have many templates like this:

<script id="stats-table-foodtypes-data-tmpl" type="text/x-jquery-tmpl">
{{#each dates}}
  {{#if data}}
   {{=$data}}
  {{else}}
    ?
  {{/if}}
{{/each}}
</script>

They expect an array of values, and they render one thing if the value is there and another thing if it is not. This worked in jQuery templates, but in jsRender, it appears that it does not call the template code at all for a null value. Is this the expected behavior?

optionally remove formatting

Hello,

I am working on a fork / port for jsrender for nodejs. Would it be possible to bake in support in option form for maintaining whitespace formatting for the scripts output?

Thanks

XML data source

Is there a way to render templates from XML datasources?

common js compliant lib

I was wondering if it would be possible to make a common js compliant jsrender.js file (something that doesn't use window.views or whatnot outside of the main method).

I have a small wrapper I wrote around jsrender for nodejs:
https://github.com/shtylman/node-jsrender

and it would make bringing in jsrender code changes much easier :)

(If you accept patches for this I would be happy to provide one).

ignore CDATA

in order to avoid validation conflicts i use a CDATA section, see example below:

  <![CDATA[
  /\* template goes here */
  ]]>
</style>

when compiling the template, the markup needs cleaning:

  markup = markup.replace(/\]\]>/, "" );

Error when rendering an empty template (empty string)

e.g. nested template in if block: {{#if languages}}{{/if}}

json document with $ in property names

jsrender seem to fail when a json property contains a $ like the youtube api data media$Group.$t

is it possible to escape this somehow or?

Do a check for old versions of jquery templates

A small thing but I spent an hour trying to figure out why JSRender was not working for me. It was because I was still loading Jquery Templates in the page. Might want to spit out a console error if JSRender is called when JQuery templates also exists.

Paths with function calls followed by dot-separation are not supported

This should be possible: {{=$ctx.foo().name}}

jsrender.js overrides $ (incompatible with Zepto)

I'm porting away from jQuery to Zepto.js, so I was happy to see that jsrender is a non-jQuery dependent version of jQuery templates. However, it overrides $ if jQuery isn't present, which means it overrides Zepto's use of $. I think I've resolved this for now by adding this to jsrender.js:
if (Zepto) {

$ = Zepto;
$.isArray = Array.isArray || function( obj ) {
        return Object.prototype.toString.call( obj ) === "[object Array]";
};
$.noConflict = function() {
        if ( window.$ === JsViews ) {
            window.$ = _$;
        }
        return JsViews;
}

}

But there's probably a better way - perhaps if it finds something else using $, it could just add to it, not redefine it? Thanks!

Error when nesting #each

A common use is nesting two or more #each.
I you have a JSON like

{
    "name": "m-form",
    "id": "m-form",
    "action": "",
    "method": "post",
    "elements": [{
        "type": "div",
        "class": "m-form-div-email",
        "elements": [{
            "type": "label",
            "for": "m-form-mail",
            "html": "E-mail"
        }, {
            "name": "mail",
            "id": "m-form-mail",
            "type": "text"
        }]
    }, {
        "type": "div",
        "class": "m-form-div-country",
        "elements": [{
            "type": "label",
            "for": "m-form-country",
            "html": "País"
        }, {
            "type": "select",
            "id": "m-form-country",
            "name": "country",
            "options": {
                "US": "USA",
                "ES": {
                    "selected": "true",
                    "value": "ES",
                    "html": "Spain"
                },
                "FR": "France",
                "PT": "Portugal",
                "UK": "United Kingdom"
            }
        }]
   }]
}

And have the following templates,
formTemplate:

<script id="formTemplate" type="text/x-jquery-tmpl">

    
Lorem ipsum
    {{#each elements tmpl="#elementTemplate"}}

</script>

elementTemplate:

<script id="elementTemplate" type="text/x-jquery-tmpl">
{{#if type == 'div'}}
    

        my div
        {{#each elements tmpl="#inputTemplate"}}
    
{{/if}}
</script>

inputTemplate:

<script id="inputTemplate" type="text/x-jquery-tmpl">
{{#if type == 'label'}}
{{=html}}
{{/if}}
</script>

The result should be a:

FORM
    DIV
        ...elements
    DIV
        ...elements

But instead I get nested elements as:

FORM
    DIV
        ...elements
        DIV
            ...elements

Hope I'm clear and you can fix it.

slashes url encoded

<img src="{{if photo}}${photo}{{else}}/media/no_photo.png{{/if}}" class="photo" alt="${slashes_title}" />

not working... getting

<img alt="Soraya" class="photo" src="%7B%7Bif%20photo%7D%7D$%7Bhtml%20photo%7D%7B%7Belse%7D%7D/media/no_photo.png%7B%7B/if%7D%7D">

Provide a tool for pre-compiling templates

Is it possible to make a tool available for precompiling templates (using node, for instance)?

This could be integrated in an assets builder setup or using tools like Guard.

I'm hoping this could improve performance under production.

Thanks for considering the idea.

Consider adding templateLoaded event

I have found when working with jquery templates that there are a number of things that need to be bound after the template is rendered, for example click events or loading masks/watermarks on inputs. My solution to this was to wrap the template load call in a function which inserts the template name as an attribute to target DOM element and pass the original arguments, then use .live() to wire these behaviors if the template and event appears. For example:

$("[template*=#navigation]").live("template_loaded", function(e,templateName) {  }

Is there an existing/different way to do this sort of behavior binding after template load that i may have missed? is firing some events off that we can subscribe to something you could consider in the future.

expression eval's missing and/or

Boris,
I'm not sure it's an issue rather than a request... :)

Nevertheless, it would be nice to be able to do a
{{#if varOne==1 && varTwo==2 }}

and Merry Xmas ! ;)

rendering takes ages under Chrome with big List

I tested the rendering in IE7-9 and from a few hundreds rows until a few thousand, it goes extremly fast, even in IE7. In Firefox, it's ok but it takes more time, specially the difference between IE and firefox grows when the data are bigger and bigger, but well it's still acceptable.
But in Chrome, it takes 2-3 seconds by 1000 lines, 10-15 by 2000 rows and almost 1 minute by 3000 while it takes at most one second for IE7 for exactly the same data. I guess there is somewhere something wrong.

Print Top 10 list using each

Using this as an example

http://borismoore.github.com/jsviews/demos/jQueryConfDemosOct2011/08_each-tag.html

What is the best method to print just the first x Languages.

Brad.

$.views is undefined

Sorry I can't provide code to back this issue... I was testing with an ajax call which returned an object that was preprocessed and then passed to render... This problem appeared (under FF7)... The template was OK, as well as the variables... Do you know if there are known bugs where this can happen?

On < IE9 rendering engines, SCRIPT1010: Expected identifier, jquery.render.js, line 341 character 2

Trying to render the following on IE9 in IE8, IE7 rendering modes:

    <script id="tableChangeLog_template" type="text/x-jquery-tmpl"> 
        <div class="logrow logheader">
            <div class="logcell">Time</div>
            <div class="logcell">User</div>
            <div class="logcell">Action</div>
            <div class="logcell">Old Value</div>
            <div class="logcell">New Value</div>
            <div class="logcell">Change Reason</div>
        </div>
        {{each($index, line) data}}
        <div class="logrow">
            <div class="logcell logdate">{{= line.time}}</div>
            <div class="logcell">{{= line.user}}</div>
            <div class="logcell">{{if line.action.indexOf("&shy;") == -1}}{{= line.action}}{{else}}{{html line.action}}{{/if}}</div>
            <div class="logcell">{{if line.old.indexOf("&shy;") == -1}}{{= line.old}}{{else}}{{html line.old}}{{/if}}</div>
            <div class="logcell">{{if line.new.indexOf("&shy;") == -1}}{{= line.new}}{{else}}{{html line.new}}{{/if}}</div>
            <div class="logcell">{{if line.reason.indexOf("&shy;") == -1}}{{= line.reason}}{{else}}{{html line.reason}}{{/if}}</div>
        </div>
        {{/each}}
    </script>

Calling as such:

        $('#tableChangeLog_anchor').html(
            $('#tableChangeLog_template').render(my_data)
        )

Yields the following error in the console:

SCRIPT1010: Expected identifier
jquery.render.js, line 341 character 2

Tested against code circa Sept 13, commit c6daa48

Same rendering engine renders other (simpler, a few string replacements and simple each loop) templates just fine on the same page. Just blows up on the above template.

Character entities are escaped

Hi, given a JSON snippet like:

[{"title":"Cat 1 &amp; Cat 3 Title 2","body":"<p>Lorem ipsum
(I escaped the source so it looks correct in preview)

The ampersand is being escaped so that it is rendered like: &amp;amp; -- Some way to fix in the current build? (just cloned a few minutes ago). On line 244, I see:

    encoders: tmplEncode = {
        "none": function( text ) {
            return text;
        },
        "html": function( text ) {

...
How do I trigger "none"?

The less than and greater than for the p is rendered correctly (i.e. as an open p tag).

My template looks like:

<script id="pf-video-teaser-tmpl" type="text/x-jquery-tmpl">

{{=program}}

{{=title}}{{#if length}} {{=length}}{{/if}}

</script>

and I call it like (your sample demos):

$ul.html($teaser_tmpl.render(videos));

Access Parent in Nested Template

Not sure if I just missed this but in a nested template how do i display a property from the parent object..

eg. Display the movie title in the nested template

http://borismoore.github.com/jsviews/demos/jQueryConfDemosOct2011/08b_each-composition.html

Rendering Templates Inside of Templates

Unless I have overlooked it, I have not seen an example of how to render a template inside of another template. Would it require the creation of a new tag?

iterate objects with #each

Currently #each only works if you have an array, so i am having to do a costly conversion:

http://jsfiddle.net/pixelhobo/E9dUm/

It would be much better you went over the key/value pairs of an object, something like this:

http://jsfiddle.net/pixelhobo/cfEnt/

Documentation

If this is supposed to be a serious replaced for jQuery templates then you need real documentation and not just a set of examples for me to make wild guesses about

Unterminated string constant in IE8

It looks like the latest version causes an error in IE8 resulting in the following error: "Unterminated string constant." The error seems to occur in the function buildTmplFunction at this line:

   try {
            ret = new Function("$data, $view", code.slice(0, -1) + ";return result;\n\n}catch(e){return views.err(e);}");
        } catch (e) {
            ret = function () {
                return viewsNs.err(e);
            };
        }

This error is visible in all the demos.

Thanks!

Array of Data w/o Full Template Duplication

As demonstrated in Demo 1 (https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/01_inserting-data.html), when an array of data is passed to a template that template gets duplicated. Is it possible to simply iterate through the data and only duplicate part of the template?

Example

Using Demo 1 as a basis, something like...

<script id="movieTemplate" type="text/x-jquery-tmpl">
<ul>
    {{#each}}
    <li>
        {{=$itemNumber}}: <b>{{=Name}}</b> ({{=ReleaseYear}})
    </li>
    {{/each}}
</ul>
</script>

Looping through Key-value pairs

I have an object like this:

"GoodStuff": {
1: "Chimay",
2: "Orval"
3: "Westmalle"
}

I would expect that if I say ...
{{#each GoodStuff}}

Beer {{=$itemNumber}}

{{/each}}
... it shows me 3 items, but it only shows 1 single item.

I created a workaround by changing the object to
"GoodStuff": [
{
"Key": 1,
"Value": "Chimay"
},
{
"Key": 2,
"Value": "Orval"
},
{
"Key": 3,
"Value": "Westmalle"
}
]

Thanks for your work, really love working with the project!

Error: Unterminated string constant in IE7

Hi Boris,

When I run the current version of JSRender's 01_inserting-data.html page I get an Error: Unterminated string constant exception due to newlines in the generated function javascript. I fixed it by changing the end of the buildTmplFunction function to

try {
    ret = new Function("$data, $view", (code.slice(0, -1) + ";return result;\n\n}catch(e){return views.err(e);}").replace(/\n|\r/g, " "));
} catch(e) {

...but this might not be the best way to fix it!

Cheers

Jason

No value rendered for zero (0) numbers

JSON number values that are 0 are not rendered. For example:

input:
{"quantity":0}

template:
Quantity: {{=quantity}}

output:
Quantity:

no value when variable undefined

Is there a way to use a variable with {{=my_var}} and have it not print anything when that variable in undefined?

I am trying to do something like:
<input name="form_field" type="text" value={{=previous}} />

And the page is showing "undefined" as the value. I would prefer to not see any text.

Possibly settle on a different script type in examples?

I'm just throwing this thought out there as a suggestion because I feel a little weird still using the script type x-jquery-tmpl as seen in the examples.

jsrender's syntax is different than jquery-tmpl. Also, there is no jQuery dependency.

text/x-jsrender?

newly rendered input:submit button in form does not fire submit in Google Chrome

I guess this is chrome issue, but worth to mention here.

I had situation when rendered template replaced content in of whole form element content, including initial input:submit button, which caused form not submiting to server regular (without giving it hand with additional javascript code) form submit was not mention to be ajaxified, just plain old HTTP post.

Issue only occurs in Google Chrome, Firefox is not suffering from it.

Current workaround is to attach event handler like:

$("form").on("click", "input:submit", function(){ this.form.submit(); });

Demo for dynamic tempaltes

I have an ajax request that fetches the templates along with the data...

response{
templates{...},
data{....}
}

in your demos there are already predfined templates in a script element.. can you make a demo example with templates loaded from an external json file or at least from a js string variable?

Calling functions within Template

I'm switching from jquery templates and have it almost working.

I'm currently getting this error:

Error: $data.formatScheduleDateTime is not a function.

Here is my code:

{{=dateFormat(formatScheduleDateTime(DatePublished), 'dddd, mmmm dS, yyyy, h:MM TT') }}

Is there something special I need to do to call the function? i know the function exists.

Thanks,
Craig