Feature/foreach aliases

[narenranjit]

Introduces new syntax for foreach indices, to make them more usable in general, helping with nesting them in particular. You can now do:

(assuming fruits is an array in the model)

<ul data-f-foreach="f in fruits">
  <li> <%= f %>
</ul>

<ul data-f-foreach="(i, f)  in fruits">
  <li> Index: <%= i %> has <%= f %> </li>
</ul>

So while nesting you can now do:

  <u data-f-foreach="r in regions">
                   <li>
                       <ul data-f-foreach="s in sales">
                           <li> Region <%= r %> , Sales <%= s %> </li>
                       </ul>
                   </li>
               </ul>

Of course if you don't use aliases and do <ul data-f-foreach="sales"> you still have access to the key/index and value variables (there are not available if you alias them to something else).

There is a tangential breaking change, though I don't think it'll break anything built so far-- in previous versions, bodies of foreach always had access to both key and index to return the same thing. Now you get key if you're looping through an object and index if you're looping through an array but never both.

Also part of this PR is updating lodash to 4.11.1. I mistakenly thought I needed that for this feature, but turns out I didn't. I may break apart lodash into a separate PR to be merged whenever we update Contour.

cc @mmrj

Closes #30

[wglasshusain]

very nice. How do I do something different for the first or last item in a loop. For example I may want to generate:

1,2,3,4,5 (note - no comma on last item)

or

<tr>
  <th>sales</th>
  <td>10</td>
  <td>10</td>
  <td>10</td>
</tr>

[narenranjit]

With the current limitation that you can only bind to variables in the run api, you can do wither

<tr>
  <th>sales</th>
  <td data-f-repeat="sales"></td>
</tr>

or

(underscore syntax)

<ul data-f-foreach="somearray"> 
  <li> <%= (index === 0) ? "first" : value %> </li> 
</ul>

The 'last' part is interesting. My first instinct was to suggest creating a custom converter (about 10 lines of JS) but this is probably too common a use-case. I could expose a 'length' property, but this gets tricky with nested loops & can't think of a good syntax to let you alias length..Ideas?

[wglasshusain]

if you do first that's good enough. you can make a comma separated list with each element being ,X and having the first one have no comma before it.

[narenranjit]

The easier solution than that is:

Flow.dom.converters.register('join', function(v){ return v.join(',') });

<div data-f-bind="somearray | join"> </div>

A more generic/ better solution may be to expose the array itself as a variable.

<ul data-f-foreach="somearray"> 
  <li> <%= (index === somearray.length - 1) ? "last" : value %> </li> 
</ul>

You'd need to know enough js to do '-1' to compare of course. I'll create a separate ticket for this.

[mmrj]

see #82, from this branch, for additional test cases (and question on a failing case, although that may be user error).

[mmrj]

tested and verified

• /tests/integration/julia/sandbox-mj.html:245-426 (julia)
• https://forio.com/app/mjones/fml-test/pr79.html (python)