Data binding 如何根据需要在聚合物中动态创建特性_Data Binding_Polymer

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

data-binding polymer

Data binding 如何根据需要在聚合物中动态创建特性,data-binding,polymer,Data Binding,Polymer,我有一个用例，其中我有一个组件（如数据库），我希望将所有信息作为可绑定属性公开。但是，使用这些属性的任何特定客户都只需要其中的少数属性。数据库中可能有1000个条目。我怎样才能知道客户实际需要哪些例如： Polymer('database, { observer : { name : function(oldVal, newVal) { onDataChanged('name', newVal);}, addr : funct

我有一个用例，其中我有一个组件（如数据库），我希望将所有信息作为可绑定属性公开。但是，使用这些属性的任何特定客户都只需要其中的少数属性。数据库中可能有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....
        }
    });

在这种情况下，我只希望动态地为实际需要的数据绑定创建观察处理程序。

如果您愿意让客户端扩展组件以指定所需的数据库字段，那么您可以仅为它们指定的字段动态地创建观察程序

例子组成部分


动态特性
有关更改，请参阅控制台
聚合物({
//验证它是否是允许的属性
//例如，我们将允许任何以validitem开头的内容
isValidateAttribute:函数（名称）{
return（name.match（“^validitem”）；
},
//获取属性
已创建：函数（）{
for（此.publish中的名称）{
log（“正在尝试：+名称）；
//确认它是一个动态属性
if（this.isValidAttribute（name））{
console.log（“接受：+名称）；
此[名称]=“从数据库中提取”；
//参考资料：
// 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=新的病理观察者（此，名称）；
open（makeHandler（this，name））；
}
}
/*************试验**********************************/
//通过更新来验证动态更新是否有效
此.job（'update_validitem1'，function（）{
this.validitem1=“10秒后更新”；
}, 10000);
/************结束测试******************************/
}
});
//参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
函数makeHandler（元素、属性）{
函数处理程序（newval、oldval）{
log（“元素”+element，“属性：+property”，从：“+oldval”，到：“+newval”）；
}
返回处理程序；
}

用法


演示dynamicproperties测试页面
演示
动态标签
输入
生产
{{item1choice2}}

问题的答案似乎是这件事做不到。当属性绑定（或试图绑定）到组件时，似乎没有任何钩子或事件可用于获取通知。我在这里提交了一个bug/增强请求

请求将来支持此功能。

这并不能回答您的问题，但我认为，当使用聚合物构建构件时，您应该在构件名称中添加一个

。请将“数据库”更改为“数据库”，谢谢您的回复。然而，这正是我试图避免的。必须两次指定相同的信息。任何时候你这样做都会让自己暴露出程序员的错误，让它变得不那么用户友好。在没有在两个位置指定它的情况下，我能做的最好的事情是：客户机数据绑定更改->db元素属性->db元素代码更改。但相反，只有元素更改->db元素属性更改。使用客户端数据绑定时，看不到更新。如果client->db元素是您需要的唯一方向，那么我可以提供该代码，但它似乎是一个不完整的解决方案。它使用attributeChanged回调来检测更改，并且只选择我关心的属性。

<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>