javascript - KOGrid Cell Template $parent is not defined -

a beginner level javascript question...

i need define cell template kogrid dependent on values in vm. want text displayed green if associated field true else display in red.

i have following cell templates:

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>`; 

these used in columndefs follows

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

this works fine want reduce code duplication having helper function return cell template. like:

    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:      } } 

this called by:

var accountedittemplate = getcelltemplate('account', $parent.entity.accountisvalid()); 

my problem when try referenceerror:$parent not defined

what's best way solve copy & paste code growth - same kind of functionality many fields?

code updated per jason's suggestion - not yet working

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

unless i'm mistaken you're building string later executed template there's no need pass in actual validation object during template construction, need string represents validation object. template can reference $parent context later when it's executed.

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