4

语境：

我正在对不同上下文中的 Web 组件组合进行测试。特别是我试图通过在所涉及组件的DOM/Shadow DOM中的搜索过程从另一个 Web 组件访问其中一个来关联多个 Web 组件。

问题：

假设我们有一个名为x-foorequires to access another的 web 组件x-randgen。后一个组件公开了前者使用的业务方法。为了避免两个组件之间的紧密耦合通信，我想使用发现机制x-foo来x-randgen通过跨模型DOM的搜索过程进行访问。Shadow 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 技术以适当的术语重新编写上面的代码段，我将不胜感激。

4

2 回答 2

8

你可以这样写你的问题函数：

    getRandGen: function () {
      var root = this;
      while (root.parentNode) {
        root = root.parentNode;
      }
      return root.querySelector('x-randgen');
    }

http://jsbin.com/xufewi/1/edit

其他解决方案可以使用单态模式（罕见）或适当的控制器（常见）。

单态的想法是一个特定的元素表示一个共享状态（即max值）的管道。无论您需要在何处访问共享状态，您只需创建访问器元素之一。

控制器的想法是元素冒泡一个请求randgen实用程序的事件。一些祖先（控制器）处理事件并提供资源。这是一种非常适合设计灵活性的依赖管理。

http://jsbin.com/tudow/1/edit

于 2014-05-30T22:47:52.427 回答
1

您的 jsbin 中有两个错误。第一个是你想要的domReady，不是ready因为你getRandGen()在里面调用，它会查询 DOM。即使这有点脆弱，因为它取决于x-randgen您x-foo的 domReady 事件触发时存在的元素（因此，如果x-randgen它在条件模板中，例如

第二个问题是document.querySelector('x-randgen')找不到<x-randgen>ShadowDOM 的内部。

这里有一些术语澄清。“模板上下文”和“全局上下文”的想法并不完全正确。Polymer 元素<template>在它们的影子根中实例化它们的 s，从而建立一个影子 dom。shadow dom 是隔离组件的抽象，因此它们不太可能干扰页面的其余部分，页面也不太可能干扰它们。可以跨越 shadow dom 边界，但请注意，您可能会触及其他组件的实现细节。

这就是说，如果你不在乎x-randgen你得到了什么，即使它在一些完全不相关的组件中，这应该可以工作：document.querySelector('x-randgen') || document.querySelector('body /deep/ x-randgen'). JSBin：http: //jsbin.com/goqikire/1/edit

理想情况下，尽管您会更好地了解 thex-randgen相对于您的 的位置x-foo，或者正如我在上面建议的那样，负责 thex-randgen和 the的组件x-foo可以明确地使它们彼此了解。

于 2014-05-30T16:11:22.933 回答