"ReferenceError: edit is not defined" in Hierarchical template knockoutjs? - templates

Question

I'm going to create a hierarchical template html tags with knockoutjs :
Json Data :
{
"BenchmarkGroups": [{
"Id": 43,
"Title": "Display",
"PersianTitle": "Display",
"ObjectId": 12,
"ParentId": 0,
"OrderNumber": 0,
"ImagePath": "/File/Get/14971.jpg.ashx",
"Attachments": [],
"ChildrenBenchmarkGroup": [{
"Id": 44,
"Title": "Screen measurements",
"PersianTitle": "Screen measurements",
"ObjectId": 12,
"ParentId": 43,
"OrderNumber": 0,
"ImagePath": "",
"Attachments": [],
"ChildrenBenchmarkGroup": [],
"ParentBenchmarkGroup": null,
"Object": null,
"BenchmarkItems": []
},
{
"Id": 45,
"Title": "Viewing angles",
"PersianTitle": "Viewing angles",
"ObjectId": 12,
"ParentId": 43,
"OrderNumber": 0,
"ImagePath": "",
"Attachments": [],
"ChildrenBenchmarkGroup": [],
"ParentBenchmarkGroup": null,
"Object": null,
"BenchmarkItems": []
},
{
"Id": 46,
"Title": "Color charts",
"PersianTitle": "چارت رنگ ها",
"ObjectId": 12,
"ParentId": 43,
"OrderNumber": 0,
"ImagePath": "",
"Attachments": [],
"ChildrenBenchmarkGroup": [],
"ParentBenchmarkGroup": null,
"Object": null,
"BenchmarkItems": []
}],
"ParentBenchmarkGroup": null,
"Object": null,
"BenchmarkItems": []
}]
}
Html :
<script id="BenchmarkGroups-template" type="text/html">
<li>
<!-- ko if: $index() > 0 -->
<hr style="width: 98%; margin: 10px auto;" />
<!-- /ko -->
<div data-name="benchmarkgroup-header" style="background: #E4E45B; padding: 10px; margin: 0 10px;" data-bind="attr: { 'data-groupId': Id }">
<div style="float: right; margin: 0 20px 0 0;">
<h3 style="direction: rtl; margin: 0; cursor: pointer;" data-bind="html: PersianTitle, event: { click: edit }" title="عنوان گروه بنچمارک به فارسی"> </h3>
</div>
<!-- ko if: ImagePath() != '' -->
<img data-bind="attr: { src : ImagePath() + '?maxwidth=50&maxheight=50' }" src="#" alt="" style="max-width: 50px; max-height: 50px; float: left; margin: 0 10px 0 0;" />
<!-- /ko -->
<div style="float: left; margin: 0 0 0 20px;">
<h3 style="direction: ltr; margin: 0; cursor: pointer;" data-language="en" data-bind="html: Title, event: { click: edit }" title="عنوان گروه بنچمارک به انگلیسی"> </h3>
</div>
<div class="clear-fix"></div>
</div>
//`ReferenceError: edit is not defined` at leaf
<ul style="width: 100%;" data-bind="template: { name: 'BenchmarkGroups-template', foreach: ChildrenBenchmarkGroup }"></ul>
</li>
</script>
<div style="width: 70%; margin: 10px auto;" id="BenchmarkGroupsDiv" data-bind="visible: BenchmarkGroups().length > 0">
<fieldset>
<legend>#Html.DisplayNameFor(model => model.BenchmarkGroups)</legend>
<ul style="width: 100%;" data-bind="template: { name: 'BenchmarkGroups-template', foreach: BenchmarkGroups }"></ul>
</fieldset>
</div>
It will be OK if I remove the following line from template but it doesn't show ChildrenBenchmarkGroup :
<ul style="width: 100%;" data-bind="template: { name: 'BenchmarkGroups-template', foreach: ChildrenBenchmarkGroup }"></ul>
But with above line knockoutjs throw an error at the leaf objects at the line.

Answer 1

I've found the problem:
I wrote a mapper option as the following :
var mappingOptionsBenchmarkGroups = {
create: function(options) {
return (new (function() {
var self = this,
$target = undefined,
$acceptButton = $('<input type="button" title="ثبت" style="margin:0 5px 0 0; width:auto; height:auto; border:1px solid #4651D8; background: auto; border-radius:0; background-image:none; line-height:20px; box-shadow:none;" value="✓" />'),
$rejectButton = $('<input type="button" title="انصراف" style="margin:0 5px 0 0; width:auto; height:auto; border:1px solid #4651D8; background: auto; border-radius:0; background-image:none; line-height:20px; box-shadow:none;" value="×" />'),
$textBox = $('<input type="text" style="width:150px; box-shadow: none; padding: 2px; border-radius: 0;" />');
$acceptButton.click(function() {
hideEdit();
});
$rejectButton.click(function() {
hideEdit();
});
$textBox.keyup(function(e) {
if (e.keyCode == 27) {
hideEdit();
}
});
self.edit = function(arg1, arg2) {
if ($target) hideEdit();
$target = $(arg2.target);
if ($target.attr('data-language') == 'en') {
$textBox.css('direction', 'ltr');
$textBox.attr('placeholder', 'نام انگلیسی');
} else {
$textBox.css('direction', 'rtl');
$textBox.attr('placeholder', 'نام فارسی');
}
showEdit();
};
function showEdit() {
$textBox.val($target.text());
$target.hide()
.before($textBox.show())
.before($acceptButton.show())
.before($rejectButton.show());
$textBox.show().focus();
}
function hideEdit() {
$target.show();
$textBox.hide();
$acceptButton.hide();
$rejectButton.hide();
$target = undefined;
}
ko.mapping.fromJS(options.data, {}, this);
})());
}
};
it applies to the root and I had to use $root.edit instead of edit.