Splicing to update a KO Observable array shows an error

Question

I am trying to update a table after editing a record using splicing but I am getting an error like below. The gender is a radio button. I even tried to remove that, the next field shows an error. What am I doing wrong here?

Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: gender Message: gender is not defined

I saw a similar post Splicing new array of items onto existing Knockout observable array causes binding errors but it does not seem to work for me.

View Model

var vmSearchResultsModel = function () 
{
    var self = this;
    self.SearchResults = ko.observableArray([]);  //Holds the results of the search
}

The data returned to the observable array

"SearchResults": [
{
  "id": 3,
  "name": "Adrian D'Costa",
  "dob": "/Date(-37776600000)/",
  "gender": "M",
  "joindate": "/Date(-37776600000)/"  //<-- this is another issue I need to fix
},
{

  "id": 14,
  "name": "Janet D'Curz",
  "dob": "/Date(-37776600000)/",
  "gender": "F",
  "joindate": "/Date(-37776600000)/"

}
]

Splicing

var getjsondata = ko.toJSON(self.SearchResults, ['name', 'gender', 'dob', 'joindate']) // select only what is required to show
console.log(getjsondata);
var obj = JSON.parse(getjsondata);  // convert JSON to JS string
alert(obj[0].gender); //M Male, F Female
self.SearchResults.splice(self.CurrentIndex, 1, obj);  // updates the row that was edited  <-- shows an error here

The radio button binding while editing

<td> Gender </td>
    <td>
        <input type="radio" id="rdMale" name="Gender" value='M'  data-bind="checked: $root.gender" />   
        <input type="radio" id="rdFemale" name="Gender" value='F' data-bind="checked: $root.gender" />
    </td>

EDIT 1 The below template shows when I search for some data based on DOB, JoinDate...

<script type="text/html" id="TmplSearchResults">  
    <tr style="border-bottom: 1px solid #CCC;">
        <td valign="middle" data-bind="text: name"></td>
        <td valign="middle" align="center" data-bind="text: gender"></td>
        <!-- ko if: ($root.SearchByVal() ==="DOB") -->
              <td valign="middle" data-bind="textualDate: dob"></td> 
       <!-- /ko -->

        <!-- ko if: ($root.SearchByVal()==="Join Date") -->
              <td valign="middle" data-bind="textualDate: joindate"></td> 
       <!-- /ko -->
        <td valign="middle" > <img type="image" title="edit" src="images/edit1.png"  data-bind="event:{ click: $root.EditEmpDetails.bind($data, $index())}" /></td>
    </tr>        
</script>

EDIT 2

I changed the code like this

self.SearchResults().splice(self.CurrentIndex, 1, obj);

Now the Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: gender Message: gender is not defined error does not show but the row does not get updated with the changes. Where am I wrong?

EDIT 3

Jfiddle http://jsfiddle.net/7LYad/1/

UPDATE

This fiddle is the one without any errors but the splicing does not take place nor the observables get update. Where am I wrong. Should I have two view models, one for showing the grid and one for saving, and one for editing, saving and splicing?

http://jsfiddle.net/7LYad/2/

a jsfiddle would be good. but i think you dont need $root. just bind gender. — adt, Oct 09 '13 at 07:49
Updated my question. I used $root as the data is shown once on a table. Editing the row will show the screen to edit. Then saving should update the row edited but does not — Adrian, Oct 09 '13 at 07:58
I removed the $root but still that error shows. I am not too sure how to create a jsfiddle replicating my issue. But I think third parameter obj is an array and that could be causing the problem — Adrian, Oct 09 '13 at 09:14
This is the error - Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: gender Message: gender is not defined — Adrian, Oct 09 '13 at 12:09
I added Edit 2 with the changes I did. Now that error does not show but the row does not get updated — Adrian, Oct 09 '13 at 13:54
I have added a JFiddle. Except there is some other issue come up. Not too good at jfiddle, but that error comes — Adrian, Oct 12 '13 at 07:46
What do you want it to do? Show 'result' after it has been edited? — PW Kad, Oct 12 '13 at 14:22

ebohlman · Answer 1 · 2013-10-12T14:19:10.660

0

Your problem has nothing to do with your splicing: $root.gender tells Knockout to look for a property called gender that's a property of the ViewModel (i.e. what you specified in ko.applyBindings) itself; the $root qualifier always refers to the top level of the VM. Plainly you don't have such a property on your VM; instead it's a property of the objects in SearchResults.

If your problematic HTML is enclosed in something with a foreach: SearchResults binding (or it's in a template that's invoked with a foreach or data option), then just drop the qualifier and just write "gender".

UPDATE AFTER FIDDLE

1) You're never setting EditEmployee in your main view model to a true value, so the fields for editing an employee will never display.

2) In SaveEmpDetails you're trying to splice the JSON string representation of an object, rather than the object itself, into SearchResults.

edited Oct 12 '13 at 14:19

answered Oct 09 '13 at 17:17

ebohlman

14,795
5
33
35

Actually it is there but the way I declared it is wrong. In SearchResults is an observable array that has gender, and outside I am declaring gender as an observable that will hold the value for editing. This is wrong not sure how I can do it, any suggestions – Adrian Oct 11 '13 at 15:50
I had updated my second fiddle now the editing part shows, but the splicing still is an issue. I tried PW Kad's fiddle but still there is an issue – Adrian Oct 12 '13 at 14:52
I understood your comments but not sure how to do this. Let me keep trying. I tried having two different view models too that even caused a bigger issue – Adrian Oct 12 '13 at 15:17

score 0 · Answer 2 · answered Oct 12 '13 at 14:24

0

http://jsfiddle.net/7LYad/5/

When you are splicing a Knockout observableArray you don't want to splice the value of the array, you want to splice the underlying array itself. Make sure to not 'get' the value of the observableArray when you are trying to change the value, unless you plan to set that equal to something else -

self.SearchResults.splice(self.CurrentIndex, 1, getjsondata);

Other possible way -

self.otherArray = self.SearchResults().splice(self.CurrentIndex, 1, getjsondata);

answered Oct 12 '13 at 14:24

PW Kad

14,953
7
49
82

I tired your fiddle. When I click the edit link and make a change and save it removes the edited row and shows this error - Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: gender Message: gender is not defined – Adrian Oct 12 '13 at 14:50
What are you trying to do? I can't rewrite your entire code, I am trying to show you the proper syntax to use. What do you want your code to do??? – PW Kad Oct 12 '13 at 14:57
I appreciate you helping. All I am trying to do is, when I save I want the row to get updated with the new values. Thanks once again – Adrian Oct 12 '13 at 14:59

Splicing to update a KO Observable array shows an error

2 Answers2