Support converters with template binding

[wglasshusain]

I want to use a function to pull the last item of an array (usually of time). Right now I am doing

 <script>
        function current(item) {
            if (!item || item.constructor != Array) {
                return item;
            } else {
                return (item.length == 0) ? null : item[item.length - 1];
            }
        }
 </script>

<p data-f-bind="Time,Inventory"> The current time is <%= current(Time) %> and inventory is <%= current(Inventory) %>
<p>

I thought I could make this into a converter but it didn't work

<script>
    Flow.dom.attributes.register('current', function (item) {
           if (!item || item.constructor != Array) {
                return item;
            } else {
                return (item.length == 0) ? null : item[item.length - 1];
            }
        });
</script>


<p data-f-bind="Time,Inventory | current"> 
     The current time is <%= Time %> and inventory is <%= Inventory %>
</p>

I get an error "converter-manager.js:159. Uncaught Error: Could not find converter for current"

Can we support converters with the example above? I think it'd be ok to have the converter applied to all variables in the list.

[narenranjit]

The above script is registering an attribute (to be used as data-f-current) not a converter. I used the code snippet above as a converter and it worked as expected.

As an aside, re: " it'd be ok to have the converter applied to all variables in the list." -- that's controlled by the third parameter to 'register' which lets you decide if your converter can handle an array of values, or if Flow should call it one item at a time and map the result.

[mmrj]

not sure how this works as a converter.

using epijs 2.0 (or 1.8.1) and flow 0.11, and rewriting the second example as a converter,

1. passing in "false" means that all the array elements from both arrays are passed to the converter one at a time
2. passing in "true" means that the converter is passed an Object that has two arrays (time, inventory) inside it. e.g.

    Flow.dom.converters.register('current', function (item) {
           if (!item || item.constructor != Array) {
                console.log('in if. item = ', item);
                return item;
            } else {
                console.log('in else. item = ', item);
                return (item.length == 0) ? null : item[item.length - 1];
            }
        }, true);

shows:

in both cases, the output is:

The current time is 1,2,3,4 and inventory is 10,20,30,40

[mmrj]

(fwiw, this example is much easier to write using neither, and just using | last. see https://forio.com/app/mjones/fml-test/issue87.html)