Templates &引用；引用错误：未定义编辑"；在分层模板knockoutjs中？
我将使用knockoutjs创建分层模板html标记： Json数据：Templates &引用；引用错误：未定义编辑"；在分层模板knockoutjs中？,templates,knockout.js,hierarchical,Templates,Knockout.js,Hierarchical,我将使用knockoutjs创建分层模板html标记： Json数据： { "BenchmarkGroups": [{ "Id": 43, "Title": "Display", "PersianTitle": "Display", "ObjectId": 12, "ParentId": 0, "OrderNumber": 0, "ImagePath": "/File/Get/
{
"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": []
}]
}
<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>
但是，使用上述行knockoutjs会在行中的叶对象上抛出一个错误。我发现了问题： 我编写了一个映射器选项，如下所示：
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);
})());
}
};
var映射选项基准组={
创建：函数（选项）{
返回（新的（函数（）{
var self=这个，
$target=未定义，
$acceptButton=$（''），
$rejectButton=$（''），
$textBox=$（''）；
$acceptButton。单击（函数（）{
隐藏它（）；
});
$rejectButton。单击（函数（）{
隐藏它（）；
});
$textBox.keyup（函数（e）{
如果（e.keyCode==27）{
隐藏它（）；
}
});
self.edit=函数（arg1、arg2）{
如果（$target）隐藏了它（）；
$target=$（arg2.target）；
如果（$target.attr（'data-language'）=='en'）{
$textBox.css（'direction'，'ltr'）；
$textBox.attr（‘占位符’、‘占位符’、‘占位符’、‘占位符’）；
}否则{
$textBox.css（'direction'，'rtl'）；
$textBox.attr（‘占位符’、‘占位符’、‘占位符’、‘占位符’、‘占位符’）；
}
showEdit（）；
};
函数showEdit（）{
$textBox.val（$target.text（））；
$target.hide（）
.before（$textBox.show（））
.before（$acceptButton.show（））
.before（$rejectButton.show（））；
$textBox.show（）.focus（）；
}
函数hideEdit（）{
$target.show（）；
$textBox.hide（）；
$acceptButton.hide（）；
$rejectButton.hide（）；
$target=未定义；
}
fromJS（options.data，{}，this）；
})());
}
};
$root.editeditvar 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);
})());
}
};