Comments (10)
The behavior of {{#each dataExpression}} ... {{/each}}
or {{each dataExpression tmpl="myTemplate"}}
is to render the content of the template against the data returned by dataExpression
.
If the data is an array, it iterates for each item - which becomes the current dataItem for that rendered template (view) - and concatenates the result. But if dataExpression returns a single object, then it renders just once, with that object as current data item.
If you don't pass any data at all, as in {{each tmpl="myTemplate"}}
then it will render the template just once, keeping the current dataItem from the outer scope.
I am considering changing the name of the tag from each to {{for}} to make less surprising that it does not iterate when you pass it a singleton.
It is not a common scenario to render the same template against each of the properties of an object. Usually you know, statically, the properties of the object, and can do
{{#each propertiesObject }}
Created Date: {{=createdDat}}
Created By: {{=createdBy}}
{{/each}}
If you want to apply the same template to each property, as an iteration over all the properties, you can provide a helper function to return the array, rather than add a new array to your data, as in {{#each $ctx.propertyArray(properties)}}...{{/each}}
See also this comment on my blog
from jsrender.
See also #49
from jsrender.
My apologies for necro-posting, but I wanted to provide an example of why someone might want to iterate through the properties of an object.
In a nutshell, for the purposes of data-linking, an array/collection does not allow (or very easily allow) for changing just one property of one entry.
Take this data:
inout = {
joe:{
name: 'Joe',
status: 'out'},
jane:{
name: 'Jane',
status:'in'},
jill:{
name:'Jill',
status:'away'}
}
And I render it like so:
$("#domElement").link(inout,"#templateID");
I could then update a particular person like
$.observable(inout).setProperty({joe:{status:'in'}});
I think - I haven't tested this, but looking through the source, I'm guessing this is how it works
By only being able to iterate over arrays, I either need to
- Re-generate the entire array server side (assuming the change is triggering an ajax request to save in a DB or something), or
- Convert the inout object to an array, and keep a mapping of people to array index, so I can update the property like so:
var index = nameToNameMap['joe'];
$.observable(inout).setProperty({index:{status:'in'}});
Is there another way to approach this?
from jsrender.
I agree there are scenarios where this is useful. I hope to be able to look into supporting it...
from jsrender.
Can we reopen this issue then please? It's definitely necessary, and the original poster closed the ticket for some reason.
from jsrender.
I may provide built-in support for this in the future, but already it is quite easy to address this scenario using a custom helper function or tag. I have added a sample to show how to do that. (Code here)
from jsrender.
That looks perfect. Thanks!
from jsrender.
Any chance of reopening this issue? It took me a while to figure out hashes are not supported by {{for}}. Cool that you can do it via custom helpers, but this seems rather fundamental.
from jsrender.
OK, makes sense. Reopening as a feature request for built-in support.
from jsrender.
This feature is now supported, using the new {{props}}
tag.
https://github.com/BorisMoore/jsrender/blob/master/demos/scenarios/03_iterating-through-fields-scenario.html
http://borismoore.github.io/jsrender/demos/scenarios/03_iterating-through-fields-scenario.html
#218
{{props details}}
<div>
<b>{{>key}}</b>: {{>prop}}
</div>
{{/props}}
from jsrender.
Related Issues (20)
- template content in external files HOT 2
- renderFile to accept a file as input HOT 2
- Nested props loop is not picking up properties of a function HOT 4
- any breaking changes between 0.9.82 and current 1.0.5 ? HOT 2
- JSRender strips multiple white spaces from input HOT 3
- Node + jsRender: allow absolute paths, (and also passing context to renderFile) HOT 8
- space is not html-encoded HOT 6
- regex not working HOT 2
- Difference between Browser and Node app - Null Propagation Operator HOT 2
- Conditional check if equal to string HOT 5
- Incomplete jsrender.min.map file HOT 2
- Provide support for passing an ID selector to $.templates() even when using JsRender without jQuery HOT 6
- Please provide a good documentation on how to use this in Angular 8+ or React 9+ versions HOT 2
- {{if}} tag doesn't work on keys with array or object with properties HOT 1
- swig.renderFile gives callback function required error HOT 3
- Chrome Extension Manifest V3 HOT 3
- $(...).render is not a function HOT 1
- How can I load data from jsrender template and update it HOT 2
- Using a tmpl selector that begins with a # but is not an ID selector does not work HOT 1
- Get an error t is not a function when adding if block HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsrender.