# Partial bindings application

**URL:** <https://forums.bitovi.com/t/partial-bindings-application/1046>\
**Category:** CanJS\
**Created:** [February 27, 2019, 10:10pm UTC](https://forums.bitovi.com/t/partial-bindings-application/1046 "2019-02-27T22:10:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [February 27, 2019, 10:10pm UTC](https://forums.bitovi.com/t/partial-bindings-application/1046/1 "2019-02-27T22:10:43Z")

</div>

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

```auto
	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.

---

<div class="post-metadata">

**Author:** ![Mattchewone](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/mattchewone/32/440_2.png) [@Mattchewone](https://forums.bitovi.com/u/Mattchewone)\
**Post date:** [February 28, 2019, 7:48pm UTC](https://forums.bitovi.com/t/partial-bindings-application/1046/2 "2019-02-28T19:48:57Z")

</div>

I put together a little demo here - [https://codesandbox.io/s/13p2n2w57?fontsize=14](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.