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.