Working with JSON data from CouchDB in Knockoutjs

Question

I am trying to get example code from knockoutjs running with data from my local Couchdb. http://learn.knockoutjs.com/#/?tutorial=loadingsaving

I use a view to get my tasks from the db. As Couch returns rows.value.tasks

{"total_rows":5,"offset":0,"rows":[
{"id":"216c1717d57aa328b8d3e5a79f0008fe","key":["216c1717d57aa328b8d3e5a79f0008fe",1],"value":{"title":"derde title taak","isDone":false}},

I added .value in function Task(data) and I added .rows in var mappedTasks = $.map(allData.rows... Initial tasks (title, isDone) are showing, however I can no longer add a new task. If I push the Add button I get a error on .value is not defined. Remove a task is processed without errors.

Can anyone help me to get this example working? Next step for me is to update changes in task-list back to db. Help on that one is also very welcome.

// TaskListViewmodel

function Task(data) {
    this.title = ko.observable(data.value.title);
    this.isDone = ko.observable(data.value.isDone);
}

function TaskListViewModel() {
// Data
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
    return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
});

// Operations
self.addTask = function() {
    self.tasks.push(new Task({ title: this.newTaskText() }));
    self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.remove(task) };

// Load initial state from server, convert it to Task instances, then populate self.tasks
 $.getJSON("http://127.0.0.1:5984/tasks/.../tasks", function(allData) {
    var mappedTasks = $.map(allData.rows, function(item) { return new Task(item) });
    self.tasks(mappedTasks);
}); 

}

ko.applyBindings(new TaskListViewModel, $("#DataKO")[0]);

antishok antishok · Accepted Answer · 2012-05-06T23:46:53

The problem is with this line:

self.tasks.push(new Task({ title: this.newTaskText() }));

Your Task constructor expects the data argument to have a 'value' property but you only provided a 'title'.

Working with JSON data from CouchDB in Knockoutjs

1 Answers