KOGrid细胞模板$父没有定义

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' }, 
    ]; 

这工作得很好，但我想有一个辅助功能，以减少重复代码是将返回单元格模板。喜欢的东西：

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

我的问题是，当我尝试这个我得到的ReferenceError：

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: 

    } 
} 

这可以通过调用$父没有定义

什么是解决的最佳方式复制&粘贴代码增长 - 我会为许多领域提供同样的功能吗？更新按照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

除非我记错了，你只是建立以后将获得为模板执行的字符串，所以没有必要在实际通验证对象在模板构建期间，您只需要表示验证对象的字符串。稍后，模板本身可以在执行时引用$父上下文。

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>"; 
    ... 
}