KOGridセルテンプレートの$親が

Question

初心者レベルjavascriptの質問...私は私のVM内の値に依存している私のKOGridためのセルテンプレートを定義する必要が

定義されていません。関連フィールドが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>`; 

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

これは正常に動作しますが、私はそのヘルパーの機能を有することにより、コードの重複を減らしたいが、次のようにこれらは私のcolumnDefsに慣れますセルテンプレートが返されます。ような何か：私の問題は、私はこれをしようとすると、私はにReferenceErrorを取得している

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

：$親は、この問題を解決する最良の方法は何

が定義されていない

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: 

    } 
} 

これは、によって呼び出される可能性コピー&ペーストコードの増加 - 私は多くの分野で同じ種類の機能を使用しますか？私は実際に合格する必要はありませんので、あなただけの後にテンプレートとして実行されます文字列を構築していると誤解していない限り、まだ

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