Context:
我正在不同的上下文中进行有关 Web 组件组合的测试。特别是,我试图通过在以下位置中的搜索过程从另一个 Web 组件访问其中一个组件来关联多个 Web 组件:DOM
/ Shadow DOM
所涉及的组件。
Problem:
假设我们有一个名为的 Web 组件x-foo
需要访问另一个x-randgen
。后一个组件公开了前者使用的业务方法。为了避免两个组件之间的紧密耦合通信,我想在中使用发现机制x-foo
访问x-randgen
通过整个搜索过程DOM
and Shadow DOM
楷模。我特别指出了两种可能的情况。两者都可以x-foo
and x-randgen
实例化位于全局上下文(index.html)中,或者它们都出现在另一个模板中,例如x-bar
。问题是搜索过程在每种情况下应该以不同的方式实现。接下来,我展示了一个伪代码,其中包含我的方法,本质上总结了我的问题。 (全局示例可以在这里找到:http://jsbin.com/qokif/1/ 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>>;
}
});
问题:
如果有人可以根据聚合物技术以适当的术语重新表述上面的片段,我将不胜感激。
你可以这样写你的问题函数:
getRandGen: function () {
var root = this;
while (root.parentNode) {
root = root.parentNode;
}
return root.querySelector('x-randgen');
}
http://jsbin.com/xufewi/1/edit http://jsbin.com/xufewi/1/edit
其他解决方案可以使用单态模式(罕见)或适当的控制器(常见)来实现。
单态的想法是,一个特定的元素表达了一个共享状态的管道(即max
价值)。无论何时需要访问共享状态,您只需创建一个访问器元素即可。
控制器的想法是,元素冒泡一个事件,请求randgen
公用事业。某个祖先(控制器)处理事件并提供资源。这是一种非常适合设计灵活性的依赖管理。
http://jsbin.com/tudow/1/edit http://jsbin.com/tudow/1/edit
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)