Bind knockoutjs observable array to MVC4 viewmodel

Bind knockoutjs observable array to MVC4 viewmodel

I'm trying to convert a knockoutjs observable array to JSON and then
trying to bind it to a string variable in my MVC4 view model which is
strongly typed; however, the binding doesn't seem to be working properly.
In the following code, the self.itemsToJSON variable is the one I'm
binding to the MVC4 View. In the self.addItem function I am converting the
self.items array into JSON using the ko.toJSON function and then assigning
the value to self.itemsToJSON. I have also attempted to use the subscribe
function to do this as well, but the same results occurred. The alert does
show the JSON information when a new item is added, but it does not appear
to be binding correctly on the html side.
$('document').ready(function () {
function SampleItem(code, name, qty, uom, note) {
var self = this;
self.code = ko.observable(code);
self.name = ko.observable(name);
self.qty = ko.observable(qty);
self.uom = ko.observable(uom);
self.note = ko.observable(note);
self.code.subscribe(function (newValue) { self.name(newValue); });
self.name.subscribe(function (newValue) { self.code(newValue); });
}
function ItemList(data) {
var self = this;
self.ItemCode = ko.observable(data.ItemCode);
self.ItemCodeDesc = ko.observable(data.ItemCodeDesc);
}
function SampleItemListViewModel() {
var self = this;
self.newItem = new SampleItem("", "", "", "", "");
self.items = ko.observableArray([]);
self.codeSortedList = ko.observableArray([]);
self.nameSortedList = ko.observableArray([]);
self.UOMList = ko.observableArray([]);
self.itemsToJSON = ko.observable("");
self.addItem = function () {
self.items.push(new SampleItem(self.newItem.code(),
self.newItem.name(), self.newItem.qty(), self.newItem.uom(),
self.newItem.note()));
self.newItem.code("");
self.newItem.name("");
self.newItem.qty("");
self.newItem.uom("");
self.newItem.note("");
self.itemsToJSON = ko.toJSON(self.items);
alert(self.itemsToJSON);
}
self.removeItem = function (item) { self.items.remove(item); }
$.getJSON('/NewSample/ItemCodeList', function (data) {
var mappedItems = $.map(data, function (item) { return new
ItemList(item) });
self.codeSortedList(mappedItems);
});
$.getJSON('/NewSample/ItemCodeDescList', function (data) {
var mappedItems = $.map(data, function (item) { return new
ItemList(item) });
self.nameSortedList(mappedItems);
});
$.getJSON('/NewSample/UOMList', function (data) {
var mappedItems = $.map(data, function (item) { return item });
self.UOMList(mappedItems);
});
}
ko.applyBindings(new SampleItemListViewModel());
});

On the MVC4 view side, below is example of the bindings I have used. I
have tried both the regular html way and the Html helper method. I have
also tried the data-bind with "text" and "value" with no success.
<input type="hidden" data-bind="text: $root.itemsToJSON" name="ItemList"
id="ItemList" />
@Html.TextBoxFor(m => Model.ItemList, new { data_bind = "value:
$root.itemsToJSON" })

And finally, this is the variable inside the MVC4 strongly typed view model.
public string ItemList { get; set; }

If more information is needed, please let me know and I will supply all I
know/have.