Polymer 如何从JS访问聚合物功能

很抱歉，如果说的有点混乱，我不知道该怎么问这个问题

我要做的是保持DOM与localStorage值同步，并使用interact.js鼠标事件更新localStorage值

目前，我能够正确设置localStorage值，但在更新DOM时遇到问题

我当前的构建是在Polymer框架内，因此我在选择ShadowDOM内容时遇到困难

DOM树看起来像

PARENT-ELEMENT
  # SHADOW ROOT
    EL
    EL
    DIV
      CUSTOM ELEMENT
    EL
    EL

以下是我未能解决问题的一些方法。自定义元素是纯JS的，因为我不知道如何在Polymer中正确包装interact.JS函数：

我尝试从纯JS中的自定义元素直接访问父元素的shadowDOM

我尝试从父元素Polymer中选择一个helper updateDOM（）函数，并直接从自定义元素的setter运行它

也许我完全采取了错误的方法，但是我还没有找到interact.js使用原生聚合物函数的类似物

---

我希望这个问题已经足够清楚了…

一般来说，您应该使用

this.set（）

或任何if它是一个数组，以便正确地通知ShadowDOM

由于您希望从元素本身之外执行此更新，因此我建议您：

• 从元素中公开两个方法，可用于从元素外部添加/删除/更改属性值

• 这些方法将在内部使用适当的渠道进行更改

例如（您可以调用

addItem（）

从元素外部添加项）：

{{item.name}
HTMLImports.whenReady（函数（）{
“严格使用”；
聚合物({
是：“x-示例”，
特性：{
数据：{
类型：数组，
价值：[
{name:“一”}，
{name:“两个”}，
{名称：“三”}
]
}
},
//公开，获取元素并使用此方法
//添加您的项目
附加项：功能（项目）{
此项。推送（“数据”，项目）；
}
});
});
setTimeout（函数（）{
//只需“抓取”元素并使用
//`addItem（）`您公开的方法
//向其中添加项目。
document.querySelector（“#x-example-elem”）.addItem（{name:“Four”}）；
}, 2500);

如果我们忽略了问题的

interact.js

部分，而将重点放在聚合物上，您可能可以在不耦合两者的情况下解决这个问题

要使用Polymer绑定到

localStorage

值，请使用元素。在下面的示例中，名为

flavor\u 1\u amount

的

localStorage

值被加载并存储到名为

\u flavor1Amount

的属性中。如果值在

localStorage

中不存在或为空，则

元素将触发一个事件（

iron localStorage load empty

），该事件允许您绑定到回调（例如初始化回调）

假设数据绑定可以在外部更改，您可以使用来保持数据绑定的同步

请看这个完整的演示。从Chrome DevTools中检查您的

localStorage

：

---

对于第一种方法，您是否尝试了

Polymer.dom（shadowDOMNode）.querySelector（“#dom_object_1”）

或在

parentElement

中创建一个属性，使用

localstorage

填充该属性，并在该属性上设置一个观察者。谢谢您的建议。我不是很熟悉聚合物观察员，我不确定如何正确设置一个在这种情况下。它是否类似于

值：{

类型：字符串，

值：localStorage.lsValue，

观察者：'DOM\u helper'

}，

观察者：[

'DOM\u helper（）'

this.$（''dom_object_1'）.innerHTML=localStorage.lsValue；

}
您将不需要第二个
observer
数组，并且在observer调用的函数中，您将获得
newVal
，因此不需要tp调用
localStorage
，如果您可以提供一些代码片段（jsbin、codepen等）我可以帮你，或者如果你愿意，我可以为你提供一个观测者和双向
属性绑定的例子，或者正如@nicholas所建议的那样，你可以创建一个公共方法，然后使用该方法更新数据。好的，我正在尝试解决这些建议。在
父元素中创建一个公共方法，然后调用我来自
自定义元素
的t对我来说是最有意义的抽象。但是，我不知道如何从
自定义元素
调用
父元素
中的函数，并跨越JS/Polymer的障碍。我很确定有一种方法可以从JS调用Polymer的声明性包装函数，但我不明白没问题，但它解决了您的问题吗？仍然无法从
车间混音控制台
（父聚合物元件）和
滑块
（子元件）中选择功能用JS编写，通过Polymer导入，试图保持代码模块化。现在回头看一些Rob Dodson关于数据绑定和观察者的Polycast。我认为我的主要问题是我无法在纯JS中穿过Polymer JS膜。我的架构有点不稳定，因为我依赖interact.JS作为导入，而且没有正确地将其包装在Polymer中。我正在使用JS setter设置
localStorage
，当event.dy发生更改时会触发该设置，并试图通过观察
localStorage
中的更改来更新Polymer中的DOM。以我上面的代码片段为例（这是一种在沙盒中轻松创建聚合元素的方法（因此代码片段或JSFIDLE）并为我制作一个
  var shadowDOMNode = document.querySelector('PARENT-ELEMENT');
  var dom_object_1 = shadowDOMNode.querySelector('#dom_object_1');
  dom_object_1.innerHTML = localStorage.dom_object_1;

if (event.dy > 0) {
    this.$$('PARENT-ELEMENT').updateDOM();
}

<iron-localstorage name="flavor_1_amount"
                   value="{{_flavor1Amount}}"
                   use-raw
                   on-iron-localstorage-load-empty="_initFlavor1Amount">
</iron-localstorage>

<paper-input label="Flavor Amount (mL)" value="{{_flavor1Amount}}"></paper-input>