0
my-app는 서로 통신해야하는 두 개의 다른 사용자 정의 요소를 포함하는 사용자 정의 요소입니다. 서랍 요소를 열거 나 닫으려는 머리글 요소의 단추를 클릭합니다. 메시징에 데이터 바인딩을 사용하려고하지만 작동하도록 설정할 수 없습니다.데이터 바인딩 - 다른 사용자 정의 요소 내의 2 개의 사용자 정의 요소 간 통신
철 신호를 사용해야 할 수도 있지만 데이터 바인딩이이 조건에서 작동하지 않는 이유를 알고 싶습니다.
부모 요소 - 내 - 응용 프로그램
<dom-module id="my-app">
<template>
<app-header-layout has-scrolling-region>
<my-header drawer-active="{{drawerState}}"></my-header>
<div id="main-content" class="">
<div class="imgWrap"><img src="../images/banner.jpg"></img>
</div>
</div>
<my-drawer drawer-opened="{{drawerState}}"></my-drawer>
</app-header-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
drawerState: {
type: Boolean,
value: false,
notify: true
}
}
});
</script>
</dom-module>
자식 요소 - 내 헤더
<dom-module id="my-header">
<template>
<app-header>
<app-toolbar>
<div class="logo"><img src="../images/logo.svg"></img>
</div>
<paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
</app-toolbar>
</app-header>
</template>
<script>
Polymer({
is: 'my-header',
properties: {
drawerActive: {
type: Boolean,
value: false,
notify: true
}
},
toggleDrawer: function() {
this.drawerActive = !this.drawerActive;
}
});
</script>
</dom-module>
자식 요소 - 내 서랍
<dom-module id="my-drawer">
<template>
<app-drawer align="end" opened="{{drawerOpened}}">
<paper-menu> ... </paper-menu>
</app-drawer>
</template>
<script>
Polymer({
is: 'my-drawer',
properties: {
drawerOpened: {
type: Boolean,
value: false,
notify: true
}
}
});
</script>
</dom-module>
복사하고 붙여 넣기 만하면됩니다. 'app-layout'을로드 했습니까? – miyamoto
@miyamoto 내 수입을 다시 확인하고 내 서랍을 내 응용 프로그램에 없습니다. 나는 내가 그것을 추가했다는 것을 맹세 할 수 있었다. 당신의 문제에 대해 대단히 죄송합니다. 이 질문을 삭제해야합니까? – jess
당신에게 달려 있습니다. 나는 두 가지 더 많은 것을 말하고, 당신의 요소가 현재 구조화되어 있기 때문에 문제를 예상합니다. 'my-header'와'app-drawer' 요소를'my-header'와'my-drawer'에서'my-app' 요소로 옮기고'my-header'와'my-drawer'를 사용할 것을 권합니다. 그 요소의 내용 하위 요소로 이것은 한 곳에서 페이지의 레이아웃을 정의하는 모든 요소를 유지하며,'app-header-layout'이 적절히 작동하는 것이 필요하다고 생각합니다. – miyamoto