Clash Royale CLAN TAG#URR8PPP

Two way databidning is not working with knockout ObservableArrays

I have following code, which has two functions.

var model = function()
var self = this;
self.inventoryItems = ko.observableArray();

myArray = ["Value1", "V1lue2", "Value3", "Value4"];
self.inventoryItems(myArray);

self.addItems = function(vm)
self.inventoryItems.push('New Item');


self.SaveInventory = function(data)
$('#htmlBlock').html(myArray);
console.log(myArray)
;

;

ko.applyBindings(new model());

ul
list-style: none;


li
margin-top: 5px;


.info-text,
a,
button
margin-top: 20px;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: inventoryItems">
<li>
<input data-bind="value: $data" />
</li>
</ul>
<div>
<a data-bind="click: addItems">+ Add more</a>
</div>
<button type="submit" class="btn btn-accent" data-bind="click: SaveInventory">Save changes</button>
<div class='info-text' id="htmlBlock">
</div>

With this code my UI is initializing fine and when I click on 'Add more' , able to get a new text box and myArray/inventoryItems is also working fine.

But if I edit any item and save the value, I am not getting the update value back.

What am I missing?

1 Answer
1

There is no need for a separate reference to the underlying array in the observable array, it only confuses things. Read out the value by using self.inventoryItems().

self.inventoryItems()

A good way to see what your model looks like in real time is using an element with data-bind="text: ko.toJSON($data, null, 't')"

data-bind="text: ko.toJSON($data, null, 't')"

var model = function()
var self = this;
self.inventoryItems = ko.observableArray(["Value1", "V1lue2", "Value3", "Value4"]);

self.addItems = function(vm)
self.inventoryItems.push('New Item');


self.SaveInventory = function(data)
console.log(self.inventoryItems())
;

;

ko.applyBindings(new model());

ul
list-style: none;


li
margin-top: 5px;


.info-text,
a,
button
margin-top: 20px;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: inventoryItems">
<li>
<input data-bind="value: $data" />
</li>
</ul>
<div>
<a data-bind="click: addItems">+ Add more</a>
</div>
<button type="submit" class="btn btn-accent" data-bind="click: SaveInventory">Save changes</button>
<pre class='info-text' data-bind="text: ko.toJSON($data, null, 't')">
</pre>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.