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

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 文档？（将来可能还会出现在 <my-second-element my-property="[[myProperty]]"> 等属性中使用 [[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 中发生变化，它也会在 "this" html 文档中发生变化。添加第二个元素也不会有问题：

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

除非您没有告诉我们您想要的某些特定行为，否则这应该就是您想要的。 :)

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

Polymer data bind without dom-bind

data-binding

dom

polymer

polymer-1.0