javascript - KOGrid 单元格模板 $parent 未定义

Question

初级 JavaScript 问题...

我需要为我的 KOGrid 定义一个单元格模板，它依赖于我的 VM 中的值。我希望如果关联字段为 True，则文本显示为绿色，否则显示为红色。

我有以下单元格模板:

var accountEditTemplate = `<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[$data.field]" />
                                <span data-bind=\"visible: !$parent.selected(),
                                    text: $parent.entity[$data.field],
                                    css: $parent.entity.accountIsValid() === 'True' ? \'passed-validation\' : \'failed-validation\'">
                                </span>
                            </div>`;

    var costCentreEditTemplate = `<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[$data.field]" />
                                <span data-bind=\"visible: !$parent.selected(),
                                    text: $parent.entity[$data.field],
                                    css: $parent.entity.costCentreIsValid() === 'True' ? \'passed-validation\' : \'failed-validation\'">
                                </span>
                            </div>`;

这些在我的columnDefs中使用如下

self.columnDefs = [
        { width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: supplierEditTemplate },
        { width: 150, field: 'invoiceNo', displayName: 'Invoice No' },
        { width: 150, field: 'costCentre', displayName: 'Cost Centre (Dim1)', cellTemplate: costCentreEditTemplate },
        { width: 200, field: 'glAccount', displayName: 'GL Account (Account)', cellTemplate: accountEditTemplate },
        { width: 100, field: 'amount', displayName: 'Amount' },
        { width: 300, field: 'invoiceDesc', displayName: 'Invoice Description' },
        { width: 150, field: 'accountIsValid', displayName: 'Valid Account' },
        { width: 150, field: 'costCentreIsValid', displayName: 'Valid Cost Centre' },
        { width: 150, field: 'supplierIsValid', displayName: 'Valid Supplier' },
    ];

这工作正常，但我想通过一个返回单元模板的辅助函数来减少代码重复。像这样的东西:

    function GetCellTemplate(fieldName, isValid)
{
    var template = `<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[fieldName]" />
                                    <span data-bind=\"visible: !$parent.selected(),
                                        text: $parent.entity[fieldName],
                                        css: isValid === 'True' ? \'passed-validation\' : \'failed-validation\'">
                                    </span>
                                </div>`;

    switch(expression) {
        case 'account':
            return template
            break;
        default:

    }
}

这可以通过以下方式调用:

var accountEditTemplate = GetCellTemplate('account', $parent.entity.accountIsValid());

我的问题是，当我尝试这个时，我得到 ReferenceError:$parent is not Defined

解决复制和粘贴代码增长问题的最佳方法是什么 - 我将在许多领域使用相同的功能？

代码已根据 Jason 的建议更新 - 尚未运行

function GetCellTemplate(fieldName, validationFieldName) {
    var template = `<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[{fieldName}]\" />
                    <span data-bind=\"visible: !$parent.selected(),
                        text: $parent.entity[{fieldName}],
                        css: $parent.entity.{validationFieldName} === 'True' ? \'passed-validation\' : \'failed-validation\'\">
                    </span>
                </div>`;
    }

var editBatchVm = function () {
    var self = this;
    var $loadingIndicator = $('#loading-indicator');

    // Properties
    self.recs = ko.observableArray([]);
    self.selected = ko.observableArray();

    var accountEditTemplate = GetCellTemplate('account', 'accountIsValid');
    var costCentreEditTemplate = GetCellTemplate('costCentre', 'costCentreIsValid');
    var supplierEditTemplate = GetCellTemplate('supplier', 'supplierIsValid');

    self.columnDefs = [
        { width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: supplierEditTemplate },
        { width: 150, field: 'invoiceNo', displayName: 'Invoice No' },
        { width: 150, field: 'costCentre', displayName: 'Cost Centre (Dim1)', cellTemplate: costCentreEditTemplate },
        { width: 200, field: 'glAccount', displayName: 'GL Account (Account)', cellTemplate: accountEditTemplate },
        { width: 100, field: 'amount', displayName: 'Amount' },
        { width: 300, field: 'invoiceDesc', displayName: 'Invoice Description' },
        { width: 150, field: 'accountIsValid', displayName: 'Valid Account' },
        { width: 150, field: 'costCentreIsValid', displayName: 'Valid Cost Centre' },
        { width: 150, field: 'supplierIsValid', displayName: 'Valid Supplier' },
    ];

Answer 1

除非我弄错了，否则您只是构建一个稍后将作为模板执行的字符串，因此在模板构建期间无需传入实际的验证对象，您只需要表示验证对象的字符串。模板本身可以在稍后执行时引用 $parent 上下文。

var accountEditTemplate = GetCellTemplate('account', 'accountIsValid');

...

function GetCellTemplate(fieldName, validationFieldName) {
    var template = "<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[" + fieldName + "]\" />" +
                   "    <span data-bind=\"visible: !$parent.selected()," +
                   "        text: $parent.entity[" + fieldName + "]," +
                   "        css: $parent.entity." + validationFieldName + " === 'True' ? \'passed-validation\' : \'failed-validation\'\">" +
                   "    </span>" +
                   "</div>";
    ...
}