0
my-appは、相互に通信する必要のある2つのカスタム要素を含むカスタム要素です。ヘッダー要素のボタンをクリックすると、ドロワー要素を開いたり閉じたりします。私はメッセージングのためのデータバインディングを使用しようとしていますが、動作させることができません。データバインディング - 別のカスタム要素内の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>
子要素 - MY-引き出し
<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私のインポートを再確認し、my-drawerをインポートすることが私のアプリにはありませんでした。私はそれを追加したと私は誓ったことができた。ご迷惑をおかけしてどうもありがとうございます。私はこの質問を削除すべきですか？ – jess
までです。私はいくつか言いますが、私はあなたの要素が現在構造化されているので、あなたのために問題を予期しています。 'my-header'と' my-drawer'から 'my-app'要素に' app-header'と 'app-drawer'要素を移動し、' my-header'と 'my-drawer'を使うことをお勧めしますそれらの要素のコンテンツの子として。これは、ページのレイアウトを定義するすべての要素を1か所に保持するため、 'app-header-layout'が適切に動作するために必要です。 – miyamoto