Knockout: model function not firing - knockout-2.0

Question

Knockout model function not firing on click event
Hi Friends,
I have following html code that has the model binded to the div element "bindingDiv" :
<div class="clear" id="bindingDiv">
<div class="col-sm-8">
<table class="table table-bordered table-hover" data-bind="visible: Documents().length > 0">
<thead>
<tr>
<th class="col-md-2">
Name
</th>
<th>
Display Name
</th>
<th style="max-width: .5% !important; min-width: .5% !important; text-align: center;
width: .5% !important;">
</th>
</tr>
</thead>
<tbody data-bind="foreach: Documents">
<tr>
<td>
<span data-bind="text: Id, visible:false"></span>
<span data-bind="text: Name"></span>
</td>
<td>
<span data-bind="text: DisplayName"></span>
</td>
<td>
<img class="action" title="Tools" data-placement="right" data-toggle="popover" src="~/Content/images/tool.png"
alt="tool" />
<div class="actions" style="display: none;">
<ul class="action-links" style="min-width: 75px;">
<li><a class="tool tool-remove" data-bind="click: $root.deleteDocument">Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
The following is the model object:
function Document(data) {
var self = this;
self.Id = ko.observable(data.Id);
self.Name = ko.observable(data.Document.Name);
self.DisplayName = ko.observable(data.Document.DisplayName);
self.Description = ko.observable(data.Document.Description);
self.DocumentPath = ko.observable(data.Document.DocumentPath);
self.DocumentTypeId = ko.observable(data.Document.DocumentTypeId);
};
var isBindingComplete = true;
function CourseDocumentModel(docs) {
var self = this;
self.Documents = ko.observableArray(ko.utils.arrayMap(docs, function (doc) { var d = new Document(doc); return d; }));
self.addDocument = function (doc) {
var document = new Document(doc);
self.Documents.push(document);
};
self.reloadDocuments = function(docs) {
self.Documents.removeAll();
ko.utils.arrayMap(docs, function (doc) { self.Documents.push(new Document(doc)) });
};
self.deleteDocument = function(doc) {
if (!isBindingComplete) {
return;
}
alert(ko.toJSON(doc));
var conf = true;
conf = confirm("Are you sure you want to delete?");
if (conf) {
$.ajax({
type: "POST",
url: "#Url.Action("DeleteDocument", Controllers.Course)/",
data: ko.toJSON(doc),
contentType: 'application/json',
success: function (mydata) {
self.Documents.remove(doc);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("removeDocument method error status: " + xhr.status);
alert("removeDocument method error thrown: " + thrownError);
}
});
}
};
};
$(document).ready(function() {
refreshGrid(null);
});
var model;
function refreshGrid(uploadRow)
{
isBindingComplete = false;
$.ajax({
url: "#Url.Action("GetAllDocuments", Controllers.Course)/",
type: "get",
contentType: "application/json",
success: function (docs) {
if(model == null)
{
model = new CourseDocumentModel(docs);
ko.applyBindings(model, document.getElementById("bindingDiv"));
}
else
{
model.reloadDocuments(docs);
}
if(uploadRow != null)
$(uploadRow).fadeOut();
refreshPopover();
isBindingComplete = true;
},
error: function (xhr, ajaxOptions, thrownError) {
//alert("refreshGrid error status: " + xhr.status);
//alert("refreshGrid error thrown: " + thrownError);
isBindingComplete = true;
}
});
}
I'm facing two issues here:
The deleteDocument method defined in the model CourseDocumentModel is automatically fired for the number of documents binded. I 'm not sure how this event is triggered when the ko.applyBindings(model, document.getElementById("bindingDiv")) is executed from the regreshGrid method. So as a workaround I have used a flag to determine if the binding is completed or not
After binding, If I click the Delete button from the html code, the model function deleteDocument is not firing. I don't see any issues in the console (Firebug). I googled and found suggestion of $root.deleteDocument($data) but still the issue remains. Can you please guide me addressing the issue?
Thanks,
Hemant.