Displaying observableArray items based off property

Question

What I'm trying to accomplish is having items within an observableArray display based off a property (i.e. category), for example:

Basic project setup:

var Project = function(id, name, stage){
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.stage = ko.observable(stage);
}

self.projects = ko.observableArray([
    new Project(1, "Sample Project 1", "Planning"),
    new Project(2, "Sample Project 2", "Design"),
    new Project(3, "Sample Project 3", "Development"),
]);

Basic view:

<div class="large-2 columns planning">
    <h2>Planning</h2>
    <div class="project-holder" data-bind="sortable: { template: 'projectTemplate', data: projects, afterMove: dropCallback }">
        <!-- Projects go here -->
    </div> <!-- /project-holder -->
</div> <!-- /columns -->

The plan is to have a column for each "stage", i.e. "Planning", "Design", "Development", and each would display projects in that specific stage, however I'm not sure how to set it up. Is there a method for splitting up that array and displaying the items in separate columns based off their "stage" property, or is there another way of doing things that I should be looking into? Should I have a separate array that handles each of the categories individually?

I've been using individual arrays to handle things a la http://jsfiddle.net/rniemeyer/Jr2rE/ however it seemed that maybe there was a better way of handling things on a larger scale.

Any help/insight is appreciated.

Answer 1

If each project can only be in one stage at a time the most straightforward approach would be to group projects into stages using separate view models. For example:

var project = function(name) { 
    this.name = ko.observable(name); 
};

var stage = function(name) { 
    this.name = ko.observable(name); 
    this.projects = ko.observableArray([]);
};

var viewModel = function() {
    this.stages = ko.observableArray([]);
};

If you want columns per stage in your view this is now easy to do:

<ul data-bind="foreach: stages">
    <li class="column">
        <h5 data-bind="text: name"></h5>
        <ul data-bind="sortable: { data: projects }">
            <li class="project">
                <span data-bind="text: name"></span>
            </li>
        </ul>
    </li>
</ul>

Here's a fiddle with a demo.