Creating groups with Knockout.js foreach

Question

I have a html section element which has a Knockout foreach binding to a collection of items on my viewmodel. This works fine rendering each item of the collection onto a div vertically down the page. I now want the items to group themselves in rows based on window size, so items appear in say, rows of 4 on a desktop browser but only 1 per row on mobile.

I did actually achieve this by creating the groups in the viewmodel and having my view element bind with a foreach to this groups property. The problem with this approach is that my viewmodel now has what I would consider a bunch of view logic in it and references the window object directly. Which is not right I don't think.

I already have a separate js file which has view specific logic in it, namely custom Knockout bindings for things like 'slideVisible'. How can I move the grouping logic out of my viewmodel and into this file? I'm guessing I won't be able to use Knockout's foreach binding if the grouping isn't done in the viewmodel?

RP Niemeyer RP Niemeyer · Accepted Answer · 2013-07-11T14:17:09

If you need to do this dynamically in KO, then here is an example of a binding that wraps the normal foreach binding and creates a computed on the fly that returns a structure with rows/columns based on a "count" observable.

ko.bindingHandlers.foreachGroups = {
    init: function(element, valueAccessor) {
         var groupedItems,
             options = valueAccessor();

        //create our own computed that transforms the flat array into rows/columns
        groupedItems = ko.computed({
            read: function() {
                var index, length, group,
                    result = [],
                    count = +ko.utils.unwrapObservable(options.count) || 1,
                    items = ko.utils.unwrapObservable(options.data);

                //create an array of arrays (rows/columns)
                for (index = 0, length = items.length; index < length; index++) {
                    if (index % count === 0) {
                       group = [];
                       result.push(group);
                    }

                    group.push(items[index]);
                }

                return result;
            },
            disposeWhenNodeIsRemoved: element
        });  

        //use the normal foreach binding with our new computed
        ko.applyBindingsToNode(element, { foreach: groupedItems });

        //make sure that the children of this element are not bound
        return { controlsDescendantBindings: true };
    }
};

You would use it like:

<div data-bind="foreachGroups: { data: items, count: count }">
    <ul data-bind="foreach: $data">
        <li data-bind="text: $data"></li>
    </ul>
</div>

Here is a sample: http://jsfiddle.net/rniemeyer/F48XU/

For your specific case though, I would probably:

remove the count option and just pass in the items
create your own count observable in the init function.
add a resize event handler that runs your logic and updates the count observable appropriately.

It might look like (fill in your specific resize logic):

ko.bindingHandlers.foreachGroups = {
    init: function(element, valueAccessor) {
         var groupedItems,
             data = valueAccessor(),
             count = ko.observable(1);

        ko.utils.registerEventHandler(window, "resize", function() {
           //run your calculation logic here and update the "count" observable with a new value
        });

        //create our own computed that transforms the flat array into rows/columns
        groupedItems = ko.computed({
            read: function() {
                var index, length, group,
                    result = [],
                    itemsPerRow = +ko.utils.unwrapObservable(count) || 1,
                    items = ko.utils.unwrapObservable(data);

                //create an array of arrays (rows/columns)
                for (index = 0, length = items.length; index < length; index++) {
                    if (index % itemsPerRow === 0) {
                       group = [];
                       result.push(group);
                    }

                    group.push(items[index]);
                }

                return result;
            },
            disposeWhenNodeIsRemoved: element
        });  

        //use the normal foreach binding with our new computed
        ko.applyBindingsToNode(element, { foreach: groupedItems });

        //make sure that the children of this element are not bound
        return { controlsDescendantBindings: true };
    }
};

Creating groups with Knockout.js foreach

1 Answers