CODEWITHSUNDEEP
htmlknockout.js
Paramone
Paramone

Reputation: 2724

Knockout: Can't push to observableArray

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><a href="#">Remove</a></td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 560

Answers (1)

TSV
TSV

Reputation: 7641

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.

Upvotes: 1

Related Questions