Question

我将使用knockoutjs创建一个分层模板html标签：

Json数据：

{
    "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="عنوان گروه بنچمارک به فارسی">&nbsp;</h3>
                </div>
                <!-- ko if: ImagePath() != '' -->
                <img data-bind="attr: { src : ImagePath() + '?maxwidth=50&amp;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="عنوان گروه بنچمارک به انگلیسی">&nbsp;</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>

如果我从模板中删除以下行，但它没有显示ChildrenBenchmarkGroup，那就没问题了：

<ul style="width: 100%;" data-bind="template: { name: 'BenchmarkGroups-template', foreach: ChildrenBenchmarkGroup }"></ul>

但是在上面的行中，knockoutjs会在行的叶子对象上抛出错误。

Answer 1

我发现了问题：

我写了一个mapper选项，如下所示：

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);
        })());
    }
};

它适用于root，我必须使用$root.edit而不是edit。

＆＃34; ReferenceError：未定义编辑＆＃34;在分层模板knockoutjs？

1 个答案: