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

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

在您的情况下，您只需向元素添加通知属性

即可

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

要选择数据绑定之外的值，您可以使用方法@ a1626提及

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

您使用绑定时，您的父元素本身似乎是一个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

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

2 个答案: