Add data to nested viewmodel? - mvvm

Question

Given this fiddle, how can I properly populate searchResult with dummyResults and visibleItem with dummyItems?
http://jsfiddle.net/scottbeeson/SRUKN/
var dummyResults = [
{ name: "Server1", type: "Server" },
{ name: "Server2", type: "Server" },
{ name: "Server3", type: "Server" },
{ name: "App1", type: "Application" },
{ name: "App2", type: "Application" },
{ name: "App3", type: "Application" }
]
var dummyItems = [
{ name: "Server1", type: "Server" }
]
function visibleItem() {
var self = this;
this.name = ko.observable("");
this.type = ko.observable("");
this.description = ko.observable("");
}
function searchResult() {
var self = this;
this.name = ko.observable("");
this.type = ko.observable("");
}
var viewModel = {
searchResult: searchResult(),
visibleItem: visibleItem(),
showItem: function (item) {
visibleItems.push(item);
}
}
$(document).function() {
ko.mapping.fromJS(dummyResults, searchResult);
ko.mapping.fromJS(dummyItems, visibleItem);
ko.applyBindings(viewModel);
tmp = ko.toJS(viewModel);
}

Answer 1

Here's a working edit of your fiddle with simplified html.
var viewModel = {
searchResult: ko.observableArray(ko.utils.arrayMap(dummyResults, function (item) {
return new SearchResult(item);
})),
visibleItem: ko.observableArray(ko.utils.arrayMap(dummyItems, function (item) {
return new VisibleItem(item);
})),
showItem: function (item) {
visibleItems.push(item);
}
};