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未定义

解决此副本的最佳方法是什么？粘贴代码增长 - 我会为许多领域提供相同的功能吗？

根据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上下文。

<div data-role="page" id="page1">
    <div id="cont" role="main" class="ui-content">
      <div class="splashDiv" >
          Please wait...
      </div>
   </div> 
</div>  

.splashDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

...

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

KOGrid单元格模板$ parent未定义

1 个答案: