Question

我有一个带有计算属性<my-element>的聚合物元素myProperty。我需要将myProperty绑定到HTML页面中的其他位置，因此我无法将其放在dom-bind模板中

这就是我的意思

<html>
   <body>
       <div>
          <my-element my-property="{{myProperty}}"></my-element>
       </div>
       <!--somewhere deep inside another part of the document-->
       <div>
          <h4>myProperty = </h4><span>[[myProperty]]</span>
       <div>
   </body>
</html>

我无法在my-element模板中包含[[myProperty]]和dom-bind的使用，因为这会导致几乎整个文档都包含在此内容中。尝试使用绑定会导致显示myProperty = [[myProperty]]，而不会显示[[myProperty]]的值。

是否有某种方法可以使行为类似于数据绑定但可以在整个HTML文档中使用？（将来可能还会出现[[myProperty]]在<my-second-element my-property="[[myProperty]]">等属性中使用的情况。或者，如果两个出现的事件都在dom-bind模板中单独包装，是否有某种方法可以使绑定成为全局？

提前致谢

Answer 1

不确定为什么你不能这样做：

<head>
   ...
   <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
   ...
</head>

<html>
   <body>
       <template is="dom-bind" id="app">
         <div>
           <my-element my-property="{{myProperty}}"></my-element>
         </div>
         <!--somewhere deep inside another part of the document-->
         <div>
           <h4>myProperty = </h4><span>[[myProperty]]</span>
         <div>
       </template>
   </body>
</html>

这是完全可行的。如果myProperty内的my-element发生变化，那么“此”html文档中的内容也会发生变化。添加第二个元素也没有问题：

<my-second-element my-property="[[myProperty]]">

除非您错过告诉我们您想要的某些特定行为，否则这应该是您想要的。：）

聚合物数据绑定没有dom-bind

1 个答案: