Polymer

Question

我有一个简单的聚合物元素，看起来像这样：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="selector-course">
  <template>
    <style>
        paper-dropdown-menu {
            padding:5px;
        }
    </style>
    <paper-dropdown-menu label="Course">
      <paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect">
        <paper-item value="main">Main</paper-item>
        <paper-item value="soup">Soup</paper-item>
        <paper-item value="dessert">Dessert</paper-item>
        <paper-item value="appetizer">Appetizer</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>
  </template>
  <script>
    Polymer({
        is: 'selector-course'
    });
  </script>
</dom-module>

这个元素存储在一个单独的 HTML 文件中，然后用在我的其他几个元素中，如下所示：

<link rel="import" href="components/selector-course.html">
...
<selector-course selected="{{recipe.course}}"></selector-course>

现在，在我的父元素中，我需要访问 <selector-course>

的选定值

现在，我有一个看起来像这样的解决方案：

this.shadowRoot.querySelector('selector-course').shadowRoot.querySelector('#courseSelect').selectedItem.getAttribute("value");

这可行，但是，对于访问元素的属性这样的琐碎任务，此查询似乎复杂得荒谬。

有没有更简单的方法来实现同样的事情？

Answer 1

您的父元素本身似乎是一个 Polymer 元素，因为您使用了绑定。在这种情况下，您可以使用

访问属性

this.$.<id of child>.<property name>

或者如果您的元素在 dom-if 或 dom-repeat

内

this.$$(<querySelector>).<property name>

你可以看看here

你的情况是

<selector-course selected="{{selected}}" id="mySelector"></selector-course>

在javascript

this.$.selected

Answer 2

哦不，这是一个非常糟糕的主意。访问内部元素非常脆弱，因为它需要父元素对 <selector-course> 的实现细节有深入（双关语意）的了解。更不用说您的方法不适用于 Shady DOM.

在你的情况下，你可以简单地向你的元素添加一个通知属性

Polymer({
  is: 'selector-course',
  properties: {
    selected: {
      notify: true
    }
  }
});

至select它是数据绑定之外的值，您可以使用 @a1626 提到的方法

var selected = this.$('selector-course').selected;

Polymer({
  is: 'selector-course',
  properties: {
    selected: {
      notify: true
    }
  }
});

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
  <link href="paper-dropdown-menu/paper-dropdown-menu.html" rel="import"/>
  <link href="paper-listbox/paper-listbox.html" rel="import"/>
  <link href="paper-item/paper-item.html" rel="import"/>
</head>

<body>
  <template is="dom-bind">      
    <selector-course selected="{{selection}}"></selector-course>
    <div>{{selection}}</div>
  </template>
  
  <dom-module id="selector-course">
  <template>
    <style>
        paper-dropdown-menu {
            padding:5px;
        }
    </style>
    <paper-dropdown-menu label="Course">
      <paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect">
        <paper-item value="main">Main</paper-item>
        <paper-item value="soup">Soup</paper-item>
        <paper-item value="dessert">Dessert</paper-item>
        <paper-item value="appetizer">Appetizer</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>
  </template>
</dom-module>

</body>
</html>

Polymer - 从父元素访问子元素属性的简单方法

Polymer - simple way to access child element properties from parent element

javascript

shadow-dom