blikblum / tinybind

Lightweight and powerful data binding + templating solution
http://blikblum.github.io/tinybind/
MIT License
80 stars 14 forks source link

How to access index in rv-each? #9

Closed trollkotze closed 6 years ago

trollkotze commented 6 years ago

The documentation says under "Differences from rivets.js":

Change how scope of iteration binder works. Instead of copying properties down to children, uses a prototype like approach

Related: 486 512 417 Change how to customize index name in each binder (using an attribute) Related: 551 552

Issue 551 and pull-request 552 from rivets.js, which are referred to here, talk about this feature, but it's not clear how (and if) it is implemented in tinybind. The rivets.js generic { index } does not work, nor the other syntax { %item% } that was later added in rivets.

Is it possible to access the iteration index inside rv-each in tinybind?

trollkotze commented 6 years ago

Oh, I found it. The syntax is {$index}.

Found it in the example.

But what about nested indexes? Rivets.js has this syntax now:

<ul rv-each-whatever="items">
  <li>{ %items% }: whatever</li>
</ul>

The index of the iterated array items here can be accessed with { %items% }. In this way, it is possible to distinguish indexes of nested rv-each iterations.

Is something like that also possible in tinybind?

trollkotze commented 6 years ago

Oh, I see. That's how it works:

<ul rv-each-whatever="items" index-property="something">
  <li>{ something }: whatever</li>
</ul>

Would be worth documenting, I think.

blikblum commented 6 years ago

Added docs in https://github.com/blikblum/tinybind/commit/a57e594ca5cab7831ddab79375a1d2506b995687

Should be online soon