Partial bindings application


#1

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){

		domData.set.call(el, "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(bindingData.child.name === "other") {

			} else {
				inputBindings.push(
					stacheBindings.makeDataBinding(attrNode, inputBindingContext, inputBindingSettings)
				);
			}
		}
		el.appendChild(frag);

		inputBindings.forEach(function(dataBinding){
			dataBinding.binding.start();
		});

		domMutate.onNodeRemoval(el, function(){
			inputBindings.forEach(function(dataBinding){
				dataBinding.binding.stop();
			});
		});
	});

	queues.log("flush");

	window.data = 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'/>`)(window.data);

	document.body.appendChild(frag);

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


#2

I put together a little demo here - https://codesandbox.io/s/13p2n2w57?fontsize=14

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.