Question

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

示例：

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

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

Answer 1

如果您正在寻找绑定聚合物之外的属性，例如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 希望它能帮助或提供更多代码以便更好地理解。

Answer 2

我已经按照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 - 实例已传递this，所以它也绑定到当前上下文。

祝你好运！

跨模板标签的数据绑定

2 个答案: