Question

在this示例中，core-item元素用作：

<core-item label="Checkbox" tag="paper-checkbox" url="../paper-checkbox/demo.html"></core-item>

'tag'和'url'属性在哪里记录，即它们来自哪里？（之所以感到困惑，因为它们不在core-item doc page，并且核心项目都没有扩展到其他元素？！）

Answer 1

它来自（或者我可能更好地说：它在内部使用）sampler-scaffold.html。

<core-item>标记全部包含在一个<sampler-scaffold>标记内。

在JavaScript函数中，有一个函数parseLocationHash（第120-129行）

parseLocationHash: function() {
  var route = window.location.hash.slice(1);
  for (var i = 0, item; item = this.$.menu.items[i]; i++) {
    if (item.getAttribute('tag') === route) {
      this.$.menu.selected = i;
      return;
    }
  }
  this.$.menu.selected = this.$.menu.selected || 0;
},

该函数将根据当前位置哈希从菜单中获取当前选定的项目。这就是当前所选<core-item>突出显示的方式（通过core-selector）。

在menuSelect功能（第131-147行）tag和url用于将window location.hash更改为tag属性的值。

 this.item.tag = this.item.getAttribute('tag');
 var url = this.item.getAttribute('url');
 this.$.frame.contentWindow.location.replace(url);
 window.location.hash = this.item.tag;

因此，<core-item>的外部元素可以访问内部元素，因为它们是子节点。所以它们可以在外部/父元素中引用。

如果您正在寻找属性的用法，请首先查看当前元素源代码。如果未在模板中引用它，则可以确定，无法从任何更深元素访问它。接下来，您可能会查看包含您感兴趣的元素的更高父元素。

跟进聚合物元素的包含并不总是很容易，但也许这可能会帮助你在结构内部深入潜水。

如何在Polymer core-item元素中使用其他属性？

1 个答案: