ripplejs/ripple

Each iterator on the repeated DOM element instead of container

Closed this issue · 4 comments

Following the iteration example, i've noticed that the directive is passed in the container element instead of the element being cloned at each loop.

This might present some limitations, one example being the following.
Let's say I have a ul that contains my data items. When there are no items to show I wan't to show an li with some specific formatting. If I try that now, just by having the extra liinside the element where each is applied it breaks.

This is more a question than a suggestion, just curious about the reasons behind that design option.

Can you post a code example? I think I know what you mean, just want to check

I first noticed this when trying to run the following:

customSMSTemplate = """
    <div class="SMSList">
      <div class="SMSList-add">
        <input type="text" ref="number" on-enter="{{ this.add }}" />
        <button on-click="{{ this.add }}">Add</button>
        <button on-click="{{ this.sort }}" hidden="{{ emptyList }}">Sort</button>
        <button on-click="{{ this.clear }}" hidden="{{ emptyList }}">Remove All</button>
      </div>
      <ul class="SMSList-list">
        <li each="{{items}}" >{{number}} <button on-click="{{ this.removeItem.bind(this, $index) }}">Remove</button></li>
         <li class="empty">Message when no data</li>
      </ul>
    </div>
"""

Mainly because it causes weird complications with having to worry about the order bindings are processed. That leads to a whole lot of weird mess that can usually be avoided by modifying the markup a little bit.

It could work if there was a limitation that you couldn't use other directives on the same element if you're using each. It's also a design of the plugin and not ripple, so we can change that without it affecting core :)

Sure, thanks for the clarification. As I've said, it was more curiosity than anything and indeed im more interested in explore how to control that kind of stuff with directives.