knockout js cannot delete after adding to observable array

Question

I am trying to complete some basic add and delete functionality using knockout js.

I am using asp mvc, the knockout mappings plugin and returning a simple list of strings as part of my viewModel

Currently I get three items from the server and the functionality I've created allows me to delete each of those items. I can also add an item. But if I try to delete an item i have added in the KO script I cannot delete it.

After completing research and some tests I guess i'm using the observable's incorrectly. I altered my code to pass ko.observable(""), but that has not worked. What am I doing wrong?

values on load

Array[4]0: "test 1"1: "test 2"2: "test 3"length: 4__proto__: Array[0]

values after clicking add

Array[4]0: "test 1"1: "test 2"2: "test 3"3: c()length: 4__proto__: Array[0]

ko script

    var vm = function (data) {
        var self = this;

        ko.mapping.fromJS(data, {}, self);

        this.deleteBulletPoint = function (bulletPoint) {
            self.BulletPoints.remove(bulletPoint)
        }

        this.addEmptyBulletPoint = function () {
            self.BulletPoints.push(ko.observable(""));
            console.log(self.BulletPoints())
        }
    }

HTML

<div class="col-lg-6 col-md-6 col-sm-12">
    <h4>Bullet Points</h4>
    <div id="oneLinedescriptions" class="input_fields_wrap">
        <!-- ko foreach: BulletPoints -->
        <div class="form-group">
            <div class="input-group">
                <input type="text" data-bind="value: $data" class="form-control">
                <span data-bind="click: $parent.deleteBulletPoint" class="input-group-addon btn">-</span>
            </div>
        </div>
        <!-- /ko -->
    </div>
    <button id="btnAddDescription" data-bind="click: addEmptyBulletPoint" type="button" class="btn btn-default add_field_button col-lg-12 animate-off">Add New Bullet Point</button>
</div>

EDIT

I have removed $parent but the below error was returned

Uncaught ReferenceError: Unable to process binding "foreach: function (){return BulletPoints }" Message: Unable to process binding "click: function (){return deleteBulletPoint }" Message: deleteBulletPoint is not defined

In addition to this I have been able to add new empty elements but they are not updated when a user changes the value. is this because the element I am adding is not observable? And if so how do I get round it?

What exactly do you mean by "they are not updated"? Which field is not updated, the string value in the BulletPoints array? Where do you define BulletPoints, is that an observableArray or a normal array? Can you show that code? — Jason Spake

Daniel Ormeño Daniel Ormeño · Accepted Answer · 2017-03-06T00:30:43

I've added a snippet to ilustrate how you add and remove using an Observable Array with Knockout, the majority of the code is straight from yours so you are in the right track.

Note that when binding to the methods, in this case, there's no need to reference the $parent as you are not using nested scopes. Also, when adding, you just need to pass in plain text, as the observableArray is expecting an object.

If you work with more complex types, when adding you'll need to pass the object itself, and reference its properties from it inside the scope of the iterator, you can read more about it here.

Hope this helps.

var vm = function (data) {
    var self = this;
    
    this.BulletPoints = ko.observableArray(["test1", "test2", "test3"]);

    this.deleteBulletPoint = function (bulletPoint) {
        self.BulletPoints.remove(bulletPoint)
    }

    this.addEmptyBulletPoint = function () {
        const c = self.BulletPoints().length + 1;
        self.BulletPoints.push("test "+c);
    }
}

ko.applyBindings(vm);

a {
  cursor: pointer;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<h4>Bullet Points <span><a data-bind="click: addEmptyBulletPoint">Add +</a></span></h4>
<div data-bind="foreach: BulletPoints">
   <div class="input-group">
      <h3 data-bind="text: $data"></h3>
      <a data-bind="click: deleteBulletPoint">Delete</a>
  </div>
<div>

knockout js cannot delete after adding to observable array

2 Answers