Partial bindings application


The following is a rough example of how to “forward” binding from one element onto another element.

Specifically it moves the placeholder, and value bindings from <my-input placeholder:from='placeholder' other:from='number' value:from='value'/> to an <input/> within <my-input>

	import stache from "can-stache";
	import stacheBindings from "can-stache-bindings";
	import viewCallbacks from "can-view-callbacks";
	import SimpleMap from "can-simple-map";
	import domMutate from "can-dom-mutate";
	import queues from "can-queues";
	import  domData from 'can-dom-data-state';

	var view = stache(`<input/>`);

	viewCallbacks.tag("my-input", function(el, tagData){, "preventDataBindings", true);

		var frag = view();

		var viewModelBindings = [],
			inputBindings = [];

		var inputBindingContext = {
			element: frag.firstElementChild,
			scope: tagData.scope,
			parentNodeList: tagData.parentNodeList

		var inputBindingSettings = {};
		for(let attrNode of el.attributes ) {

			var bindingData = stacheBindings.getSiblingBindingData(attrNode,{favorViewModel: true});
			if( === "other") {

			} else {
					stacheBindings.makeDataBinding(attrNode, inputBindingContext, inputBindingSettings)


		domMutate.onNodeRemoval(el, function(){

	queues.log("flush"); = new SimpleMap({
		placeholder: "Hello There",
		number: 2,
		value: "j"
	var frag = stache(`{{this.value}} <my-input placeholder:from='placeholder' other:from='number' value:bind='value'/>`)(;


Edited: Includes using domData to prevent other bindings from taking effect.


I put together a little demo here -

Once there has been a CanJS release is I’ll be able to create in codepen and use the .mjs cdn.

I think this is a good start, I think there needs to be work to get two way bindings working.