Question

假设我创建了一个Polymer元素，其中嵌入了一些其他元素。然后我将此元素放在页面上。从包含Polymer元素的页面中的Javascript，我将如何操作Polymer元素内部的嵌入元素？

例如，如果我创建了一个名为<treeview>的元素，内部使用<ul>，<li>和<paper-checkbox>元素来创建树视图层次结构，该怎么办？然后我将此控件添加到页面。如果<paper-checkbox>控件中的每个<treeview>元素都具有唯一ID，如果我知道元素的唯一ID，如何从页面调用以切换特定<paper-checkbox>我想切换？

我尝试在<treeview>元素上公开一个函数，我可以调用它来设置属性。例如，function toggleTreeviewItem(id)。但是当我尝试从包含<treeview>的页面调用toggleTreeviewItem时，它似乎永远不会起作用。我认为它失败的原因是因为在toggleTreeviewItem内部，我无法获得可嵌入嵌套<paper-checkbox>元素的<template is="dom-repeat">控件的句柄。

以下是<treeview>控件的Javascript的简化版本。正如您在toggleTreeviewItem函数中看到的，我尝试了三种不同的方法来处理我试图操作的特定<paper-checkbox>项。似乎没有人对我有用。我想我可能错过了一些显而易见的事情。

Polymer({
  is: 'treeview',

  properties: {
    someProperty: {
      type: String,
      value: "Hello Yo!"
    },

  },  // End of Properties

  observers: [
  ],

  ready: function () {
    // does some stuff here...
  },


  toggleTreeviewItem: function(id) {
    console.log('Entered method: toggleTreeviewItem', id);

    try {
      var checkbox = document.getElementById('treeview-item-' + id);
      // var checkbox = document.querySelector("#treeview-item-" + id);
      // var checkbox = Polymer.dom(this.root).querySelector("#treeview-item-" + id);
      console.log('checkbox', checkbox);
      checkbox.checked = !checkbox.checked;

    } catch (ex) {
      console.log('Name:', ex.name);
      console.log('Message:', ex.message);
      console.log('Stack:', ex.stack);
    } finally {
      console.log('Exited method: toggleTreeviewItem');
    }
  }

});

Answer 1

document.getElementById()和document.querySelector()（以及类似的本机DOM函数）无法穿透自定义元素的阴影边界，因此无法找到内部树视图项。在您的情况下，您应该在this.querySelector()中使用this.$$()（toggleTreeviewItem()的聚合物语法糖）：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',

    _toggleChk2: function() {
      this.toggleTreeviewItem(2);
    },

    toggleTreeviewItem: function(id) {
      const chkbox = this.$$(`#treeview-item-${id}`);
      chkbox.checked = !chkbox.checked;
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-checkbox/paper-checkbox.html">
</head>
<body>
  <x-foo></x-foo>
  <script>
    addEventListener('WebComponentsReady', function() {
      var foo = document.querySelector('x-foo');
      foo.toggleTreeviewItem(3);
    });
  </script>

  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="[1,2,3,4]">
        <paper-checkbox id$="treeview-item-[[index]]">Checkbox [[index]]</paper-checkbox>
      </template>
      <button on-tap="_toggleChk2">Toggle Checkbox 2</button>
    </template>
  </dom-module>
</body>

^codepen

Polymer - 如何从元素所在的页面触发对Polymer元素中嵌入的元素的操作？

1 个答案: