实施例

Question

我有一个用例，我有一个组件（如数据库），我想将所有信息公开为可绑定属性。但是，使用它的任何特定客户都只需要这些属性中的一小部分。数据库中可能有1000个条目。如何确定客户实际需要哪些。

例如：

Polymer('database, 
    {
       observer : {
           name : function(oldVal, newVal) { onDataChanged('name', newVal);},
           addr : function(oldVal, newVal) { onDataChanged('addr', newVal);},
           tel.main : function(oldVal, newVal) { onDataChanged('tel.main',
                 etc....
        }
    });

在这种情况下，我想动态创建观察处理程序，仅用于动态实际需要的数据绑定。

Answer 1

如果您愿意让客户扩展您的组件以指定所需的数据库字段，那么您可以仅为其指定的字段动态创建观察者。

实施例

组件

<link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
<polymer-element name=demo-dynamicproperties >
 <template>
   <h2>dynamic properties</h2>
   See the console for changes
 </template>
 <script>
  Polymer({
   // Validate that it is an attribute that is allowed
   //  For the example we will allow anything starting with validitem
   isValidAttribute: function(name) {
     return (name.match('^validitem'));
   },
   // Get attributes
   created: function() {
     for (name in this.publish) {
       console.log("Trying: "+name);
     // Verify that it is one of the dynamic attributes
     if (this.isValidAttribute(name)) {
         console.log("Accepting: "+name);
         this[name]="Pull from DB";
         // References:
         // https://www.polymer-project.org/0.5/docs/polymer/node_bind.html
         // https://github.com/Polymer/NodeBind/blob/master/tests/tests.js
         // https://github.com/polymer/observe-js
         var observer = new PathObserver(this,name);
         observer.open(makeHandler(this,name));

     }
    }
     /************* TEST **********************************/
         // Verify that dynamic updates worked by updating
         this.job('update_validitem1', function() {
           this.validitem1="Updated after 10 seconds";
         }, 10000);
     /************ End Test ******************************/

   }
  });
  // Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
  function makeHandler(element, property) {
    function handler(newval,oldval) {
       console.log("element" + element,"property:" + property,"from:"+oldval,"to:"+newval);
    }
    return handler;
  }
 </script>
</polymer-element>

用法

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <script src="../../webcomponents/bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
  <link rel="import" href="demo-dynamicproperties.html">
  <title>demo-dynamicproperties test page</title>
 </head>
 <body>
<polymer-element name=demo-usedb extends="demo-dynamicproperties" attributes="validitem1 validitem2 invaliditem" noscript>
</polymer-element>
  <h1>Demo</h1>
   <template is="auto-binding">
    <h2>Dynamic tag</h2>
     <demo-usedb validitem1="{{item1choice2}}" item2="setthis"></demo-usedb>
    <h2>Input</h2>
      <input type="text" value="{{item1choice2}}">
    <h3>Produces</h3>
     {{item1choice2}}
  </template>
</body>
</html>

Answer 2

看起来问题的答案是无法完成。当属性绑定（或试图绑定）属性时，组件似乎没有任何钩子或事件可用于通知。我在这里提交了一个错误/增强请求 https://github.com/Polymer/polymer/issues/1303

要求将来支持此功能。

如何根据需要在聚合物中动态创建属性

2 个答案:

实施例

组件

用法