title: Implementing a trello-like task board using knockout
body: <p>I'm trying to use <a href="https://github.com/rniemeyer/knockout-sortable" rel="nofollow">knockout-sortable</a> in order to implement a task board which resembles trello.</p>
  
  <p>I'm getting the list of tasks from a json ajax call, and each task element contains a status ("doing", "done"...).</p>
  
  <p>It's really easy to create a model right from the json using the knockout mapping plugin, and I can even use computed observer functions to filter the list of tasks in the model and read the appropriate list into each individual list. Something like this:</p>
  
  <pre><code>$.getJSON( "/tasks/list/", function( data ) {
      viewModel = ko.mapping.fromJS(data);
  
      viewModel.ToDoTasks = ko.computed(function() {
          var status = "To Do";
          return ko.utils.arrayFilter(this.tasks(), function(item) {
                  return (item.status() === status);
              });
      }, viewModel);
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;div class="widget_contents noPadding" 
       data-bind="sortable: { template: 'taskTmpl', data: ToDoTasks }"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The thing is, that when dropping from one list to another, I get an error, since knockout doesn't know how to update a list provided using an observable.</p>
  
  <p>I tried implementing the computed observable as a read-write, but I'm  getting the same error:</p>
  
  <pre><code>viewModel.ToDoTasks = ko.computed({
          read: function() {
              var status = "To Do";
              return ko.utils.arrayFilter(this.tasks(), function(item) {
                      return (item.status() === status);
                  });
              },
          write: function (value) {
              console.log(value);
              // Will update  the status field for the task in the array...
          },
          owner: viewModel
      });
  </code></pre>
  
  <p>I know it's possible to achieve this by splitting the list of tasks, so each status has its own observable list, and then merge it back when sending back to the server, but I wonder if there's a cleaner way, without having to resort to this.</p>