2017-04-16 6 views
0



사용자 정의 폴리머 요소에 대한 질문이 있습니다. 먼저 간단한 종이 입력으로 요소를 만들었습니다. 내 문제는이 요소를 "독립적 인"요소로 사용하는 방법을 모른다는 것입니다. 내 예제는 여기에 jsfiddle입니다. 첫 번째 입력 "asd"를 입력하고 Enter 키를 누른 다음 두 번째 입력 "asd"에서 Enter 키를 누릅니다. 당신은 두 요소는 속성을 공유하는 것을 볼 수 있습니다

독립적 인 특성을 지닌 다중 중합체 2 개 요소?

<!doctype html> 
<html> 
    <head> 
    <title>2.0 preview elements</title> 
    <base href="http://polygit.org/polymer+v2.0.0-rc.4/webcomponentsjs+webcomponents+v1.0.0-rc.6/shadycss+webcomponents+1.0.0-rc.2/paper*+polymerelements+:2.0-preview/iron*+polymerelements+:2.0-preview/app*+polymerelements+:2.0-preview/neon*+polymerelements+:2.0-preview/components/"> 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="polymer/polymer.html"> 
    <link rel="import" href="paper-input/paper-input.html"> 
    </head> 
    <body> 

    <input-test></input-test> 
    <input-test></input-test> 

    <dom-module id="input-test"> 
     <template> 
     <paper-input value="{{aValue}}" on-keydown="_keydown"></paper-input> 
     </template> 
     <script> 
     window.addEventListener('WebComponentsReady', function() { 
      class InputTest extends Polymer.Element { 
      static get is() { 
       return 'input-test'; 
      } 

      static get properties() { 
       return { 
       aValue: { 
        type: String, 
        value: '' 
       }, 
       _inputStore: { 
        type: Array, 
        value: [] 
       } 

       }; 
      } 

      _keydown(event) { 
       const keyCode_enter = '13'; 
       if (event.keyCode == keyCode_enter) { 
        console.log(this._inputStore.indexOf(this.aValue)) 
        this.push('_inputStore', this.aValue); 
       } 
      } 
      } 
      customElements.define(InputTest.is, InputTest); 
     }) 

     </script> 
    </dom-module> 
    </body> 
</html> 



내가 할 수있는 일,해야 할 (콘솔 로그를 "-1" "1"이됩니다 배열과 두 번째 로그에서 찾을 수 없습니다) 독립 속성?

감사합니다.

답변

1

답변을 찾았습니다.

문제는 배열의 기본값 선언입니다.

_inputStore: { 
    type: Array, 
    value: function() { 
     return []; 
    } 
} 

이 코드는 문제를 해결합니다.