2016-09-13 12 views
0

У меня есть очень простой проект:полимер: не может получить это .__ data__ проходя от хозяина

app/ 
    parent.html 
    child.html 
index.html 

Я пытаюсь передать данные от родителя к ребенку, а затем получить их в Polymer():

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="app/parent.html"/> 
    </head> 
    <body> 
    <h1>Hello Paul!</h1> 
    <x-comphost></x-comphost> 
    </body> 
</html> 

приложение/parent.html

<link rel="import" href="child.html"/> 
<dom-module id="x-comphost" noscript> 
    <template> 
    <h4>Hello, man!</h4> 
    <p>I'm seeking a child</p> 
    <x-child accessible-policies="{{policies}}"></x-child> 
    </template> 
    <script> 
    Polymer({ 
     is: "x-comphost", 
     ready: function(){ 
     this.policies = ['Hospital', 'Dental', 'Travel']; 
     } 
    }); 
    </script> 
</dom-module> 

приложение/child.html

<dom-module id="x-child" noscript> 
    <template> 
     [[accessiblePolicies]] 
     <h5>Hello again!</h5> 
     <p>Remember me?</p> 
    </template> 
    <script> 
     Polymer({ 
      is: "x-child", 
      properties: {}, 
      ready: function() { 
       console.log('thisData', this.__data__); 
      } 
     }); 
    </script> 
</dom-module> 

Беда в том, что полимер видит this.__data__ только тогда, когда данные, передаваемые от хоста объявлена ​​неявно, как и выше, рядом шаблон открывающего тега. Если я удалю его оттуда, он не сможет его увидеть. Так что это похоже на трюк. Я не хочу размещать эти данные в шаблоне, я хочу использовать его в функции Polymer. Но я не знаю, как добиться этого, правильно, без каких-либо трюков. Я считаю, что кто-то знает.

ответ

1

Вы можете передать данные через интерфейс яваскрипта, просто добавьте следующую строку в ваш родитель (x-comphost) реализации:

Polymer({ 
    is: "x-comphost", 
    ready: function(){ 
    this.policies = ['Hospital', 'Dental', 'Travel']; 

    /* Query shadow DOM for the x-child element */ 
    var childEl = Polymer.dom(this.root).querySelector('x-child'); 

    childEl.accessiblePolicies = this.policies; 
    } 
}); 
+0

Ну, у меня есть данные, но не внутри этого .__ data__, как я предположил, но вроде this.accessiblePolicies. Чтобы понять все, потребуется некоторое время. – srgg6701

+0

Btw, возможно даже не передавать данные вообще, используя this.domHost в дочернем вместо этого. – srgg6701

+1

Несмотря на то, что он работает, я бы порекомендовал не использовать это до тех пор, пока это не будет необходимо, поскольку это в основном пробивает тень-dom, лазейку, которая была намеренно оставлена ​​Polymer из-за недоступности Shadow-dom V0 во всех браузерах по соображениям производительности. Но с shadow-dom V1, почти реализованным во всех основных браузерах, и Polymer 2.0, близкий к выпуску, будет устаревшим. Вы можете прочитать об этом [здесь] (https://www.polymer-project.org/1.0/blog/2016-09-09-polymer-2.0) – a1626

0

Настройка политик в свойствах объекта вместо готового цикла в материнской компании и в соответствии с родительским атрибутом именем сделай свойства в ребенке, упомянутые в коде ниже

Parent.html

Полимер ({ является: "х-comphost",

properties :{ 

    policies : { 
     type : Array, 
     value : ['Hospital', 'Dental', 'Travel'] 
    } 
    }, 
    ready: function(){ 
    // this.policies = ['Hospital', 'Dental', 'Travel']; 

    } 
}); 

child.html

Polymer ({ является: "х-ребенок",

 properties: { 
      accessiblePolicies : { 
       type : Array, 
       value : []    } 

     }, 
     ready: function() { 
      console.log('thisData', this.accessiblePolicies); 
     } 
    });