Question

KO ‘observable’ is not releasing after I add a new row.

HTML

<input type="text" data-bind="value: newName" />
<button data-bind="click: add">Create</button>

JS

self.newName = ko.observable("");

self.add = function () {
    self.clients.push({
          Name : self.newName,
    })
}

LIST-Start

<ul>
    <li>John</li>
    <li>Joe</li>
<ul>

LIST PRODUCED
I use the fields and add ‘Foo’ which works

 <ul>
        <li>John</li>
        <li>Joe</li>
        <li>Foo</li>
    <ul>

Then I add another name ‘Bar’
.. and now I have (2) ‘Bar’, ‘Foo’ is replaced

<ul>
    <li>John</li>
    <li>Joe</li>
    <li>Bar</li>
    <li>Bar</li>
<ul>

Then I add another name ‘JarJar’, and now I have (3) ‘JarJar’, ‘Bar’ is replaced

<ul>
    <li>John</li>
    <li>Joe</li>
    <li>JarJar</li>
    <li>JarJar</li>
    <li>JarJar</li>
<ul>

However, when I delete each row, it does delete the select row, not all 3

How do I stop the observable ‘on the fields’ when add rows?

I still need the newly added row added to the KO Array so I can access it at a later time.

I think I am missing something after the self.add to either release the observable for the field, or create a = new something so the newName is a separate Array object. (not sure at all .. )

Answer 1

Because of the missing () you are passing in the Name the ko.observable function itself and not the value what it holds.

That is why you have the duplication becuase all the created objects in the clients array shares the reference to the same function.

Here is the fixed code what should work correctly:

self.newName = ko.observable("");

self.add = function () {
    self.clients.push({
          Name : self.newName(),
    })
}