vendredi 17 mars 2017

Randomize Foreach List Items in Knockout.js

Trying to take a foreach ordered list and shuffle the list items to be random. I created a function (randomOrder) and used it in the binding on the foreach item. Nothing seems to be working.

HTML:

<ol data-bind="foreach: { data: docs, randomOrder: true} ">
     <li class="result" data-bind="component: { name: 'physicianreferral.docresult', params: { doc: $data } }"></li>
</ol>

JS:

    ko.bindingHandlers.randomOrder = {
        init: function (elem, valueAccessor) {
            // Build an array of child elements
            var child = ko.virtualElements.firstChild(elem),
                childElems = [];
            while (child) {
                childElems.push(child);
                child = ko.virtualElements.nextSibling(child);
            }

            // Remove them all, then put them back in a random order
            ko.virtualElements.emptyNode(elem);
            while (childElems.length) {
                var randomIndex = Math.floor(Math.random() * childElems.length),
                    chosenChild = childElems.splice(randomIndex, 1);
                ko.virtualElements.prepend(elem, chosenChild[0]);
            }
        }
    };
    ko.virtualElements.allowedBindings.randomOrder = true;




Aucun commentaire:

Enregistrer un commentaire