上下文:
我正在对不同上下文中的 Web 组件组合进行测试。特别是我试图通过在相关组件的 DOM
/Shadow DOM
中搜索过程从另一个访问其中一个来关联多个 Web 组件。
问题:
假设我们有一个名为 x-foo
的 Web 组件需要访问另一个 x-randgen
。后一个组件公开前者使用的业务方法。为了避免两个组件之间的紧密耦合通信,我想在 x-foo
中使用发现机制,通过跨 的搜索过程访问
和 x-randgen
DOMShadow DOM
模型。我特别确定了两种可能的情况。 x-foo
和 x-randgen
实例化都在全局上下文 (index.html) 中,或者它们都出现在另一个模板中,比如 x-bar
。问题是搜索过程在每种情况下都应该以不同的方式实现。接下来我展示了一个伪代码,我的方法从本质上总结了我的问题。 (全局示例可以在这里找到:http://jsbin.com/qokif/1/)
Polymer('x-foo', {
...
getRandGen: function () {
if (<<x-foo & x-randgen are in the global context>>)
return document.querySelector('x-randgen');
else if (<<x-foo & x-randgen are in a template>>)
return <<the x-randgen tag within the template>>;
}
});
问题:
如果有人可以根据 Polymer 技术以适当的术语重新表述上面的代码段,我将不胜感激。
最佳答案
你可以这样写你的问题函数:
getRandGen: function () {
var root = this;
while (root.parentNode) {
root = root.parentNode;
}
return root.querySelector('x-randgen');
}
http://jsbin.com/xufewi/1/edit
可以使用单态模式(罕见)或适当的 Controller (常见)来制定其他解决方案。
单态的想法是一个特定的元素表达了一个共享状态的管道(即 max
值)。无论您在何处需要访问共享状态,只需创建一个访问器元素即可。
Controller 的想法是元素冒泡一个请求 randgen
实用程序的事件。某些祖先( Controller )处理事件并提供资源。这是一种非常适合设计灵 active 的依赖关系管理。
关于javascript - 访问是 DOM 或 Shadow DOM 的 Web 组件的父上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23945122/