Knockout js root binding

0
votes

I can't access a method using $root on this specific page. This code works on my other pages, but I don't understand. I have one viewmodel per page. It cannot find removeAttachment.

knockout-3.4.0.js:72 Uncaught TypeError: Unable to process binding "click: function (){return $data.bind.removeAttachment($data,event,$index) }" Message: Cannot read property 'removeAttachment' of undefined

var model = function AppViewModel(){
self.removeAttachment = function(data, event, attachmentClicked){
    fileNameToDelete = attachmentClicked;
    $("deleteText").append(" " + attachmentClicked + "?");
     $('#delete-confirm').modal('show'); 
};
};
 var app = new model();
ko.applyBindings(app, document.getElementById("panel"));
 <div id="panel">

<tbody class="types">
<!-- ko foreach: multiFileData().fileArray -->
<tr>
<td><span class="attachName" data-bind="text:name"></span></td>
<td><span class="attachName" data-bind="$parent.sizeInMB: size"></span></td>
<td id="remove" class="glyphicon glyphicon-trash" data-toggle="modal" data-target="delete-confirm" 
data-bind="click:$root.bind.removeAttachment($data, event, $index)"> </td>
</tr>
<!-- /ko -->
</tbody>
</div>
1
knockout.js

1 Answers

1
votes

You probably want:

click: $root.removeAttachment

If you need to pass in extra parameters:

click: $root.removeAttachment.bind($root, $index)

The first and second parameters passed to the function will always be $data and event. Using bind, you can push those back and pass in a new first parameter (as well as set the this value).

Also you need to make sure removeAttachment is actually set in the view model.

var model = function AppViewModel() {
    var self = this;
    self.removeAttachment = ...
};