跨模板标签的数据绑定

Posted 2021-04-12

我想知道，是否有可能将数据绑定“从模板中”出来？假设我有一个<template/>-Tag，我将其放入另一个组件的插槽中 - 该组件将其标记到其上下文中。然后我想将数据从根元素绑定到<template/>-Tag。此外，事件绑定（on-x-changed）不起作用，因为您无法分配在托管组件中定义的功能。有任何想法吗？

例：

... host
{{boundData}}
<binding-component>
    <template>
        {{boundData}}
    </template>
</binding-component>

当我在托管组件中观察boundData时，我没有看到变化。有办法解决这个问题吗？或者是我唯一的机会解雇一个自定义事件？

答案

如果您正在寻找绑定聚合物之外的属性，例如index.html，您可以将值绑定到元素。一个例子 ; index.html

 <dom-bind>
    <template>
      <binding-component bound-data="{{boundData}}"></binding-component>
    </template>
 </dom-bind>

  <script>
     // set a value a string, Number or Object etc.
     // Optionally wrap this code into a listener ie;
     // window.addEventListener('load', e=> { ...below code ... })
    var boundData= document.querySelector('dom-bind');
    boundData = {} // 

  </script>

现在在你的binding-component元素有一个属性，因为boundData希望它的帮助或提供更多的代码来更好地理解。

另一答案

我已经按照dom-if的方式工作了。就像在dom-if（reference）中一样，我正在创建一个Templatize实例，然后使用forwardHostProp来处理“内部”属性

    this.__ctor = Templatize.templatize(template, this, {
        mutableData: true,
        forwardHostProp(prop, value) {
            // handling item updates, item being the only property 
            // from within the binding component
            // everything else is automatically bound by templatize
            this.set(prop, value);
            this.update(this.item);
        },
    });

    this.__instance = new this.__ctor();
    this.root.appendChild(this.__instance.root);

这一切都发生在connectedCallback。

因为Templatize-instance通过了this，所以它也与当前的上下文绑定。

祝好运！