RivetsJS Array Filtering

Uses the RivetsJS Formatters to apply an array filter

by mrrodd

HTML

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<div id='example'>
    <fieldset>
        <legend>Filter By This Char Length:</legend>
        <input rv-value='model.filterByThisCharLength'/>
    </fieldset>
    
    <ul>
        <li rv-each-thing='model.stuff | filterStuffWithMoreThanFourChars model.filterByThisCharLength'>
            { thing.name }
        </li>
    </ul>
</div>

JavaScript

var model = {
    filterByThisCharLength : 3,
    stuff : [
        {
            name : 'Yo'
        },
        {
            name : 'Cats'
        },
        {
            name : 'Uno'
        },
        {
            name : 'Dos'
        },
        {
            name : 'tres'
        },
        {
            name : 'four'
        },
        {
            name : 'five'
        },
        {
            name : 'super long'
        }
    ]
};

rivets.formatters.filterStuffWithMoreThanFourChars = function(stuff, filterByThisCharLength) {
    return _.filter(stuff, function(thing) {
        return thing.name.length <= filterByThisCharLength;
    });
};
  
rivets.bind(document.querySelector('#example'), { model : model });