在Light DOM

Question

我正在尝试使用Polymer 1.0构建<editable-list>

理想情况下，我应该能够像这样使用它：

<user-list>
  <editable-list data="{{data}}">
    <template id="items">
      <h4>[[item.name]]</h4>
      <!-- isAuthorized() is a method in `user-list` -->
      <template is="dom-if" if="{{isAuthorized(item)}}">
        <span> - Is authorized</span>
      </template>
      <!-- deleteRow() is a method in `editable-list` -->
      <button on-tap="deleteRow"> Delete this row </button>
    </template>
  </editable-list>
<user-list>

TL;博士

<editable-list> Light DOM访问2个函数，其中一个函数包含在<user-list>中，另一个函数包含在<editable-list>中。我可以定义另一个或，但不能同时定义。

我通过使用Light Dom文档来创建包含内容的元素来实现这一目标。

我遇到的问题如下。

• 在上面的示例中，我通过名为<dom-if>的{​​{1}}调用函数。

• isAuthorized()存在于封装isAuthorized()本身的组件中。

当我尝试运行上述内容时，我自然得到了这个错误：

  

计算方法<editable-list>未定义

为了缓解这种情况，我重新调整了isAuthorized，因此它使用了父元素方法，通过设置repeater属性

dataHost

重新调整后的新问题：

• 我在// Templatize Light DOM const template = this.querySelector("#items"); this.$.repeater.templatize(template); Polymer.Bind.prepareModel(this.$.repeater); Polymer.Base.prepareModelNotifyPath(this.$.repeater); // Rescope the repeated Light DOM to point to the parent var dataHost = (this.dataHost && this.dataHost._rootDataHost) || this.dataHost; this.$.repeater.dataHost = dataHost; 中的删除按钮调用<editable-list>中存在的函数。

• 我做的<editable-list> rescoping阻止我访问此方法，因为我只能访问封装元素的（父）方法。

有什么方法可以解决这个问题吗？就像一种“合并”dataHost和父元素的方法的方法，所以我可以使用Light DOM中的两个元素方法？

可编辑列表组件：

<editable-list>

用户列表组件（包含可编辑列表）

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<dom-module id="editable-list">
  <template>
    <content></content>
    <template is="dom-repeat" id="repeater" items="{{data}}"></template>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({

        is: "editable-list",
        
        ready: function() {
          const template = this.querySelector("#items");
          this.$.repeater.templatize(template);
          Polymer.Bind.prepareModel(this.$.repeater);
          Polymer.Base.prepareModelNotifyPath(this.$.repeater);
        },
        
        deleteRow: function() {
          alert("assume this row is deleted")
        }

      });
    });
  </script>
</dom-module>

<user-list></user-list>

以下是JSFiddle的示例。请注意，由于<base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> <dom-module id="user-list"> <template> <editable-list data="{{data}}"> <template id="items"> <h4>[[item.name]]</h4> <template is="dom-if" if="{{isAuthorized(item)}}"> <span> - Is authorized</span> </template> <button on-tap="deleteRow"> Delete this row </button> </template> </editable-list> </template> <script> HTMLImports.whenReady(function() { "use strict"; Polymer({ is: "user-list", properties: { data: { type: Array, value: [ { name: "Foo", authorized: true }, { name: "Bar", authorized: false } ] } }, isAuthorized: function(user) { if (user.authorized) return true; else return false; } }); }); </script> </dom-module> <user-list></user-list>似乎在JSFiddle中未定义，因此它并没有真正起作用。在任何情况下，它可能会/不会概述代码