Knockout: Can't push to observableArray - html

Question

I've recently started using KnockOut, so I'm very new to this.
I have completed every tutorial on their site, yet can't get this specific thing to work.
I have to arrays, on the left being all the items, on the right being the items you've selected.
Once you click on the item (left table), it should .push to the right table
ViewModel:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
request.done(function (data) {
item.addItem = function () {
alert("item clicked, materiaal id: " + this.MateriaalId);//works
alert(this.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
I'm assuming it's either in this code here, or I'm not showing it correctly in my html (because I'm not getting any console errors)
HTML (right side)
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<table class="orderFormArticlesTable" style="width: 47%;float: right; font-size: 9pt;">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<!--<td><input class="orderedQty" style="max-width: 15%" value="1" />[pieces]</td>-->
<td>Remove</td>
</tr>
</tbody>
</table>

Answer 1

I'm not sure I've understood you right, but I'd solve your task this way:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
function proscessRequest(item) {
item.addItem = function () {
//alert("item clicked, materiaal id: " + this.MateriaalId);//works
//alert(item.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
ko.applyBindings(viewModel);
proscessRequest({MateriaalSku: "M1", MateriaalDescription: "D1", MateriaalId: "1"});
proscessRequest({MateriaalSku: "M2", MateriaalDescription: "D2", MateriaalId: "2"});
proscessRequest({MateriaalSku: "M3", MateriaalDescription: "D3", MateriaalId: "3"});
proscessRequest({MateriaalSku: "M4", MateriaalDescription: "D4", MateriaalId: "4"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<div>Alavilable items:</div>
<div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: addItem">Add</div></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 30px;">
<div>Ordered items:</div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: function() { $parent.orderedItems.remove($data); }">Remove</div></td>
</tr>
</tbody>
</table>
</div>
</form>
Note
I've mocked request with "proscessRequest" function called after bindings have been applied.