如何訪問Polymer元素的選定值

Question

我知道有很多關於通過javascript訪問shadow DOM中的變量的例子，但是，在嘗試了很多組合之后，我仍然無法在下面的示例中獲得當前所選名稱的值，這是一個核心菜單包裹在紙張下拉菜單中，包裹在紙張菜單按鈕中（包裹在核心工具欄中）。

<paper-menu-button halign="right">
  <paper-icon-button icon="social:person"></paper-icon-button>
     <paper-dropdown class="dropdown" halign="right">
        <core-menu id="userselection" class="menu" selected="1" selectedItem="{{userName}}">
            <template repeat="{{s in users}}">
                <core-item label="{{s.name}}"></core-item>
            </template>
        </core-menu>
     </paper-dropdown>
</paper-menu-button>

基本上，在我的javascript中，我試圖獲取當前選中的{{s.name}}值。

我的javascript文件以下列內容開頭：

var app = document.querySelector('#app');

我嘗試過這樣的事情：

this.$.userselection.selected.value, and
app.$.userselection.selected.value, and
this.shadowRoot.querySelector('#userselection').selected.value, and
app.$.userselection.selected.value; and
app.shadowRoot.querySelector('#userselection').selected.value

這些都不起作用。

列表中的第四個（例如）導致此錯誤：“未捕獲的TypeError：無法讀取未定義的屬性'userselection'”

Answer 1

訪問位於聚合物模板外的陰影區域內的html元素是棘手的，並且肯定比訪問非陰影dom元素更受限制。 此外，沒有必要這樣做，因為存在從外部訪問位於聚合物定義（陰影區域）的模板標簽內的某些變量/值而不使用dom查詢方法的技術。

你需要做幾件事：

在聚合物模板中定義的函數，在選擇列表項時觸發（例如core / paper-item）
與其他聚合物模板一樣與外界通信的聚合物火法。
並使用addEventListener使元素訂閱可由任何聚合物模板調度的某些事件。

index.html的：

<!DOCTYPE html>
<html>
<head>
    <title>pastries</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-pastries.html">
</head>
<body>
    <my-pastries pastries="[{'name':'Croissant'},{'name':'Donut'},{'name':'Pretzel'}]"></my-pastries>
</body>
<script>
    // in index.html full access is granted when accessing dom elements also defined within index.html so querySelector works here
    var patriesTemplate = document.querySelector('my-pastries');
    // 3. patriesTemplate subscribes for it's own event pastry-selected occurring within it's template definition
    patriesTemplate.addEventListener('pastry-selected', function(e) {
        // e.detail holds the pastry that is passed to fire method
        console.log(e.detail.name);// Donut
    });
</script>
</html>

聚合物模板（my-pastries.html）：

<link rel="import" href="bower_components/polymer/polymer.html">
<link href="bower_components/paper-button/paper-button.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-icon-button/paper-icon-button.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<polymer-element name="my-pastries" attributes="pastries">
    <template>
        <paper-menu-button label="Colored">
        <paper-icon-button icon="menu" class="colored"></paper-icon-button>
        <paper-dropdown class="dropdown colored">
          <core-menu class="menu">
            <template repeat="{{pastry in pastries}}">
              <paper-item on-click="{{setSelectedValue}}">{{pastry.name}}</paper-item>
            </template>
          </core-menu>
        </paper-dropdown>
      </paper-menu-button>
    </template>
    <script>
      Polymer({
        pastries: [],
        // 1. function to trigger fire method
        setSelectedValue : function(e,detail,sender){
          // get templateInstance' context to have access to the model(pastry)
          var pastry = e.target.templateInstance.model.pastry;
          // 2. fire dispatches pastry-selected event that the element patriesTemplate has subscribed for in index.html
          this.fire('pastry-selected',pastry);
        }
      });
    </script>
</polymer-element>

希望這可以幫助。

如何訪問Polymer元素的選定值

問題描述

1 個解決方案

解決方案1
0 已采納 2015-05-10 21:07:43

如何訪問Polymer元素的選定值

問題描述

1 個解決方案

解決方案1 0 已采納 2015-05-10 21:07:43

解決方案1
0 已采納 2015-05-10 21:07:43