Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3a2f1e1

Browse files
Implementation of #each with index
Currently we do not have a way to access the current index within an `#each` loop. This adds a special attribute called `$index` which can be accessed within #each loops
1 parent ef12f66 commit 3a2f1e1

File tree

2 files changed

+103
-1
lines changed

2 files changed

+103
-1
lines changed

‎st.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,31 @@
321321
if (newData && Helper.is_array(newData)) {
322322
result = [];
323323
for (var index = 0; index < newData.length; index++) {
324+
// temporarily set $index
325+
if(typeof newData[index] === 'object') {
326+
newData[index]["$index"] = index;
327+
} else {
328+
String.prototype.$index = index;
329+
Number.prototype.$index = index;
330+
Function.prototype.$index = index;
331+
Array.prototype.$index = index;
332+
Boolean.prototype.$index = index;
333+
}
334+
335+
// run
324336
var loop_item = TRANSFORM.run(template[key], newData[index]);
337+
338+
// clean up $index
339+
if(typeof newData[index] === 'object') {
340+
delete newData[index]["$index"];
341+
} else {
342+
delete String.prototype.$index;
343+
delete Number.prototype.$index;
344+
delete Function.prototype.$index;
345+
delete Array.prototype.$index;
346+
delete Boolean.prototype.$index;
347+
}
348+
325349
if (loop_item) {
326350
// only push when the result is not null
327351
// null could mean #if clauses where nothing matched => In this case instead of rendering 'null', should just skip it completely
@@ -796,7 +820,7 @@
796820
if (!replacer) {
797821
return _stringify(val, function(key, val) {
798822
if (SELECT.$injected && SELECT.$injected.length > 0 && SELECT.$injected.indexOf(key) !== -1) { return undefined; }
799-
if (key === '$root') {
823+
if (key === '$root'||key==='$index') {
800824
return undefined;
801825
}
802826
if (typeof val === 'function') {

‎test/unit/transform/loop.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,84 @@ describe('#each', function(){
3939
var actual = st.TRANSFORM.run(template, data);
4040
compare(actual, template);
4141
});
42+
describe('#each with index', function() {
43+
it("primitive", function() {
44+
var data = {"items": ["a", "b", "c"]}
45+
var template = {
46+
"{{#each items}}": {
47+
"primitive": "{{this}}",
48+
"index": "{{$index}}"
49+
}
50+
};
51+
var actual = st.TRANSFORM.run(template, data);
52+
compare(actual, [{"primitive": "a", "index": 0}, {"primitive": "b", "index": 1}, {"primitive": "c", "index": 2}]);
53+
})
54+
it("array", function() {
55+
var data = {"items": [["a"], ["b"], ["c"]]}
56+
var template = {
57+
"{{#each items}}": {
58+
"array": "{{this}}",
59+
"index": "{{$index}}"
60+
}
61+
};
62+
var actual = st.TRANSFORM.run(template, data);
63+
compare(actual, [{"array": ["a"], "index": 0}, {"array": ["b"], "index": 1}, {"array": ["c"], "index": 2}]);
64+
})
65+
it("object", function() {
66+
var data = {"items": [{name: "kate", age: "23"}, {name: "Lassie", age: "3"}]};
67+
var template = {
68+
"{{#each items}}": {
69+
"title": "{{name}}",
70+
"subtitle": "{{age}}",
71+
"index": "{{$index}}"
72+
}
73+
};
74+
var actual = st.TRANSFORM.run(template, data);
75+
compare(actual, [{"title": "kate", "subtitle": "23", "index": 0}, {"title": "Lassie", "subtitle": "3", "index": 1}]);
76+
})
77+
it("nested array", function() {
78+
var data = {"items": [["a1", "a2", "a3"], ["b1", "b2", "b3"], ["c1", "c2", "c3"]]}
79+
var template = {
80+
"{{#each items}}": {
81+
"index": "{{$index}}",
82+
"items": {
83+
"{{#each this}}": {
84+
"item": "{{this}}",
85+
"index": "{{$index}}"
86+
}
87+
}
88+
}
89+
};
90+
var actual = st.TRANSFORM.run(template, data);
91+
var expected = [
92+
{
93+
"index": 0,
94+
"items": [
95+
{ "item": "a1", "index": 0 },
96+
{ "item": "a2", "index": 1 },
97+
{ "item": "a3", "index": 2 }
98+
]
99+
},
100+
{
101+
"index": 1,
102+
"items": [
103+
{ "item": "b1", "index": 0 },
104+
{ "item": "b2", "index": 1 },
105+
{ "item": "b3", "index": 2 }
106+
]
107+
},
108+
{
109+
"index": 2,
110+
"items": [
111+
{ "item": "c1", "index": 0 },
112+
{ "item": "c2", "index": 1 },
113+
{ "item": "c3", "index": 2 }
114+
]
115+
}
116+
];
117+
compare(actual, expected);
118+
})
119+
});
42120
/*
43121
it('#each with $index', function() {
44122
var data = {"items": ['a','b','c','d']};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /