Question

我试图了解Polymer继承的工作原理。

我有一个包含常规过滤方法的父元素 fow-filter 。

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

<polymer-element name="fow-filter" attributes="">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
  </template>
  <script>
    (function () {

      Polymer("fow-filter",{

        created: function(){
          console.log("created");
        },

        ready: function(){
          console.log("ready");
        },

        filterOnRange: function(cardList, key, min, max){
          min = parseInt(min);
          max = parseInt(max);
          if(cardList){

            return cardList.filter(

              function(card){
                return (card[key] >= min) && (card[key] <= max);
              }

            );
          } else {
            return [];
          }

        },

        filterOnText: function(cardList, key, filterString, remaining){
          if(filterString === "" || filterString === "radio_all"){
            return cardList;
          } 
          else if(cardList){
            var self = this;

            return cardList.filter(

              function(card){
                //console.log(card);
                if( self.strictMatch(card[key], filterString) ){
                  return true;
                } else if(remaining){ 
                  remaining.push(card);
                }

                return false; 
              }

            );
          } else {
            return [];
          }
        },

        strictMatch:  function(text, textToSearch){
          if(text && textToSearch){
            return ( text.toUpperCase().indexOf(textToSearch.toUpperCase()) > -1 );
          } else{
            return false;
          }
        },

        fuzzyMatch: function(text, textToSearch){
          var search = textToSearch.toUpperCase();
          var text = text.toUpperCase();

          var j = -1; // remembers position of last found character

          // consider each search character one at a time
          for (var i = 0; i < search.length; i++) {
            var l = search[i];
            if (l == ' ') {
              continue;     // ignore spaces
            }

            j = text.indexOf(l, j+1);     // search for character & update position
            if (j == -1) {
              return false;  // if it's not found, exclude this item
            }
          }
          return true;
        }
      });

    })();
  </script>
</polymer-element>

我有另外一个扩展它的元素： FOW卡过滤

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

<polymer-element name="fow-card-filter" attributes="filteredCards cards nameFilter descriptionFilter attributeFilter typeFilter rarityFilter expansionFilter minCost maxCost minCost maxCost minATK maxATK minDEF maxDEF" extends="fow-filter">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
  </template>
  <script>
      Polymer("fow-card-filter",{

        observe: {
          "cards nameFilter descriptionFilter attributeFilter typeFilter" : "updateFilteredCards",
          "rarityFilter expansionFilter minCost maxCost" : "updateFilteredCards",
          "minCost maxCost minATK maxATK minDEF maxDEF" : "updateFilteredCards"
        },

        created: function (){
          this.resetFilters();
        },

        resetFilters: function(){
          this.nameFilter = "";
          this.descriptionFilter = "";
          this.attributeFilter = "radio_all";
          this.typeFilter = "radio_all";
          this.rarityFilter = "radio_all";
          this.expansionFilter = "radio_all";
          this.minCost = "0";
          this.maxCost = "20";
          this.minATK = "0";
          this.maxATK = "10000";
          this.minDEF = "0";
          this.maxDEF = "10000";
        },

        updateFilteredCards: function(){

          this.filteredCards = this.filterOnText(this.cards, "Name", this.nameFilter);


          if(this.descriptionFilter){
            this.filteredCards = this.filterOnText(this.filteredCards, "Cardtext", this.descriptionFilter);
          }

          if(this.attributeFilter){
            this.filteredCards = this.filterOnText(this.filteredCards, "Attribute", this.attributeFilter);
          }

          if(this.rarityFilter){
            this.filteredCards = this.filterOnText(this.filteredCards, "Rarity", this.rarityFilter);
          }

          if(this.expansionFilter){
            this.filteredCards = this.filterOnText(this.filteredCards, "Expansion", this.expansionFilter);
          }

          if(this.typeFilter === "spell"){
            //optimize filter
            var remainingCards = [];
            var spellCards = this.filterOnText(this.filteredCards, "Type", this.typeFilter, remainingCards);
            var remainingCards2 = [];
            var chantCards = this.filterOnText(remainingCards, "Type", "Chant", remainingCards2);
            var istantCards = this.filterOnText(remainingCards2, "Type", "Instant");
            this.filteredCards = spellCards.concat(chantCards,istantCards);
          } else {
            this.filteredCards = this.filterOnText(this.filteredCards, "Type", this.typeFilter);
          }

          this.filteredCards = this.filterOnRange(this.filteredCards, "Total Cost", this.minCost, this.maxCost);

          if((this.typeFilter !== 'spell') && (this.typeFilter !== 'addition')){
            this.filteredCards = this.filterOnRange(this.filteredCards, "Total Cost", this.minCost, this.maxCost);
            this.filteredCards = this.filterOnRange(this.filteredCards, "ATK", this.minATK, this.maxATK);
            this.filteredCards = this.filterOnRange(this.filteredCards, "DEF", this.minDEF, this.maxDEF);
          }
        }

      });
  </script>
</polymer-element>

然而，似乎我的 fow-card-filter 元素没有看到它的父方法，每次我调用它时我得到一个：

在观察者回调期间捕获异常：TypeError：undefined不是函数

e.g。

this.filteredCards = this.filterOnText(this.cards, "Name", this.nameFilter);

我做错了什么或者我遗漏了有关Polymer继承的事情吗？

编辑：我不知道为什么在父 fow-filter 元素中调用创建的和 ready 方法而不先输入 fow-card-filter 元素 ready 方法。在 fow-card-filter 中调用this.super（）会给我：

called super() on a method not installed declaratively (has no .nom property)

Answer 1

最终我发现导入整个elements.html文件是错误的。

<link rel="import" href="../../elements/elements.html">

仅用父元素替换它解决了我的问题：

<link rel="import" href="../../elements/fow-filter/fow-filter.html">

聚合继承，父方法未定义

1 个答案: