Question

我有2个自定义元素。从IndexedDB加载一堆数据对象的商店，以及必须根据这些数据对象在<canvas>上绘制内容的视图。

IndexedDB异步工作。

所以我在每个自定义元素中发布了一个属性并将它们绑定在一起，因此当IndexedDB回调解析时，它会更改存储的已发布属性，并且聚合数据绑定机制也会更改视图。

my-app模板如下所示：

<template>
  <k-store data="{{bounddata}}"></k-store>
  <k-draw data="{{bounddata}}"></k-draw>
</template>

并将bounddata设置为{}以指示这是一个对象。

在商店里会发生这样的事情：

data: null,
ready: function() {
  loaddatafromindexdb( function(theLoadedData) { 
    this.data = theLoadedData; 
  }.bind(this) );
}

在视图中应该发生这样的事情：

data: null,
attributeChanged: function( attribute ) {
   if( attribute == 'data' ) this.drawSomeStuffWithData();
}

然后我只需在视图中实现attributeChanged( attributeName )，数据就可以用于渲染。

即使在调用应用模板的ShadowDOM/src/wrappers/event.js之前，这一切都会导致ready()中出现“InvalidCharacterError”错误。可能在尝试绑定属性时，该属性是一个对象并被视为字符串或其他东西......

Answer 1

听起来像一个有趣的应用程序！

首先，不要使用自定义元素attributeChanged回调，而是在视图元素中使用property *Changed watcher。属性本身不会更改（例如data="{{boundata}}"不会更改），而是属性绑定的基础属性。要点击该数据绑定系统并在boundata更改时收到通知，请尝试：

boundataChanged: function(oldVal, newVal) {
  console.log(oldVal, newVal, this.data);
  // update canvas
}

演示：http://jsbin.com/godozowa/2/edit

至于错误，你能提供一个重新发布错误的jsbin吗？模拟数据可以。除此之外，请确保在修改DOM的任何其他代码之前包含platform.js。一般来说，越快越好。

Answer 2

我认为这可以通过以下观察者来完成。

Polymer({
  is: "your-element",
  properties: {
    bounddata: {
      type: Object,
      observer: 'dataChanged'
    }
  },
  dataChanged: function() {
     // code to refresh the element
  }
});

使用Polymer元素中的属性绑定数据对象

2 个答案: