stache.addLiveHelper(name, helper)

Adds a global helper that will be passed observable values (instead of "unwrapped") values.

For example, the name argument to upper(name) is passed as a ScopeKeyData:

import {stache, Reflect as canReflect, ObservableObject} from "can";

stache.addLiveHelper( "upper", function( str ) {
  console.log(str); //-> ScopeKeyData{}
  if ( canReflect.isObservableLike( str ) &&
      canReflect.isValueLike( str ) ) {
      str = canReflect.getValue( str );
  }
  return str.toUpperCase();
} );
var data = new ObservableObject({name: "Justin"});
var frag = stache(`{{upper(name)}}`)(data);

document.body.append(frag);

Notice how can-reflect is used to identify if the value is observable and read it.

Typically, you don't want to pass observable values to helper an instead want to pass unwrapped values. Use addHelper for this.

addLiveHelper is used to provide advanced behavior. The observables passed to the addLiveHelper callback can be written to. The following updates the observable passed to incrementEverySecond():

import {stache, Reflect as canReflect, ObservableObject, domMutate} from "can";

stache.addLiveHelper( "incrementEverySecond", ( value ) => {
  var interval = setInterval(function(){
      var current = canReflect.getValue(value);
      canReflect.setValue(value, current+1);
  },1000);

  // Listen to when the element is removed for memory safety.
  return function(el){
      domMutate.onNodeRemoval(el, function(){
          clearInterval(interval);
      })
  }
} );
var data = new ObservableObject({age: 1});
var frag = stache(`{{incrementEverySecond(age)}} Age is: {{age}}`)(data);

document.body.append(frag);