맞춤 요소 자바 스크립트 함수를 찾을 수 없습니다.

debugcn 에 게시 Dev

에릭 블 레이스

Polymer에 대해 머리를 돌리려고합니다. 분명히 커스텀 요소는 ShaBang 전체의 핵심입니다. 나는 몇 개를 만들었고, 어떤 것은 내가 원하는 것을 할 수 없을 뿐이다.

BTW 버전 0.5를 사용하고 있습니다. 왜, 단순히 내가 변화하기 위해 게으 르기 때문입니다.

여기 내 문제가 있습니다.

링크를 클릭 할 때 Paper-Dialog가 팝업되기를 원합니다. 코드가 Index.html 페이지에 직접있을 때 완벽하게 작동합니다. 그러나 사용자 정의 요소를 래핑하면 Javascript 이벤트를 찾을 수 없습니다.

콘솔에서이 오류가 발생합니다.

"Uncaught ReferenceError : toggleDialog is not defined"

나는 그것이 내가 이해하지 못하는 것 때문이라는 것을 압니다. 그러나 나는 Polymer의 너트와 볼트를 얻는 데 어려움을 겪고 있습니다.

내가하려는 코드는 다음과 같습니다.

<polymer-element name="cvirt-reader" attributes="content" >
  <template>   
    <a href="#" onclick="toggleDialog()">Read</a>    

    <div id="HelpDialog">   
      <paper-dialog  id="dlgHelper"  heading="Bottom Dialog" transition="paper-dialog-transition-bottom">
        <a href="#"><IMG src="/cvirtAnimee.gif"></a>
        <paper-button label="Fermer" affirmative autofocus></paper-button>
      </paper-dialog>
    </div>

  </template>
  <script>
  Polymer('cvirt-reader', {
      toggleDialog: function(e) {
        this.$.dlgHelper.toggle();
      }
    });
</script>
</polymer-element>

빅터 슈베르트

더 간단한 대답

Polymer는 다음 속성을 사용하여 요소의 메서드를 이벤트 에 바인딩 하는 선언적 이벤트 매핑 을 제공 on-<event name>합니다.

<a href="#" on-click="{{toggleDialog}}">Read</a>

속성의 이름을 올바르게 지정하는 한 모든 이벤트에서 작동합니다. 폴리머가 나머지를 처리합니다.

원래 답변

onclick전역 범위가 아닌 함수에 속성을 설정할 수 없다고 생각합니다 . 아마도 당신은 리스너를 ready함수 (  첫 번째 요소에 대한 read것) 와 바인딩을 시도해야합니다 .ida

Polymer('cvirt-reader', {
    ready: function () {
        this.$.read.addEventListener('click', this.toggleDialog.bind(this), false);
    },
    toggleDialog: function(e) {
        this.$.dlgHelper.toggle();
    }
});

문제는 onclick="toggleDialog()"브라우저를 사용할 때 toggleDialog전역 범위에서 함수를 찾는 반면 실제로 Polymer 요소의 속성이므로 전역 범위에 없으므로 ReferenceError.

내부에서 이벤트 리스너를 결합하여 ready찾을 수 있습니다 : 기능, 당신이 필요로하는 모든 것이 당신의 현재 범위에서 액세스 toggleDialog를 통해 this및 이벤트 리스너로 추가.

이를 사용 하면 이벤트 가 잡힐 때마다 이벤트 대신 Polymer 요소를 참조 .bind(this)하게됩니다 .thistoggleDialog

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-6

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사