제 문제는 폴리머 구성 요소가 제 행동에 정의 된 변수에 바인딩 된 데이터로 보이지 않는다는 것입니다. 이것이 지원되지 않거나 내 결함있는 생각이 무엇인지 알고 싶습니다.폴리머 - 행동에서 변수에 데이터 바인딩
내가 공유 한 동작을 사용하는 사용자들에게 글로벌 상태의 일종으로 사용되는 내 행동 변수 :
<script>
var StackOverflowBehavior = {
properties: {
show: {
type: Boolean,
value: false,
notify: true
}
},
attached: function() {
$.ajax({
type: 'GET',
url: 'http://myRestApiURL',
success: this.onRequestSucceed,
error: this.onRequestFailed
});
},
onRequestSucceed: function(response) {
this.show = true; // i hardcoded this at the moment to make sure it changes. console logging shows that the variable is getting changed. also tried changing this to this.show
}
지금은 행동에 내 폴리머 성분 훅 :
<template is="dom-if" if="{{show}}">
<!-- SOME ELEMENTS HERE -->
</template>
Polymer({
is: "my-polymer-component",
behaviors: [
StackOverflowBehavior
],
을 문제는 처음에는 show 변수에 바인딩 된 템플릿이 초기 StackOverflowBehavior.show에 바인딩되어 있으므로 템플릿이 보이지 않지만 show가 true 일 때 템플릿이 나타나지 않는다는 것입니다. 비슷하게, StackOverflowBehavior에서 show = true를 초기화하면 표시가 시작되지만 show = false로 설정하면 예상대로 템플릿이 사라지지 않습니다.
철자 신호를 사용하여 쇼 변수가 변경되었음을 알리는 해결 방법이 있습니다. 그런 다음 각 폴리머 구성 요소에는 신호를 수신 할 때 새 쇼 변수로 설정된 로컬 쇼 변수가 있습니다. 각 폴리머 구성 요소의 템플릿은 로컬 변수에 바인딩됩니다. 이것은 효과가 있습니다. 그러나 행동에서 공유 변수에 바인드 될 때 작동하지 않습니다.
편집 : 첨부 된 함수에서 변수를 변경하면 공유 전역 동작에 대한 데이터 바인딩이 작동하지만 사용자 정의 함수에서 변수를 변경하는 것처럼 보입니다. 데이터 바인딩 된 템플릿이있는 폴리머 구성 요소에서 ready() 메서드 내에서 console.log (show)를 호출하고 올바른 값을 출력하도록 할 수 있습니다.
도움을 주시면 대단히 감사하겠습니다.
이 JS Bin은 코드와 비슷합니까? http://jsbin.com/totoma/edit?html,js,output –
@TomaszPluskiewicz 비슷하지만 Behavior는 ready()에서 Ajax 호출을 가지고 있으며 콜백을 처리하는 메소드는 행동. – jbu
'show' 대신'this.show'의 값을 변경하고'attached'와'onRequestSucceed'가'properties' 객체 밖에 있는지 확인하십시오. – a1626