2
카메라의 가용성에 따라 요소를 표시/숨기려고합니다. 다른 요소의 속성을 기반으로 속성을 계산하려면 어떻게해야합니까?
감지 카메라, 및 만들-환영 모든 주요 내부에있는 카메라 분리 만들-응용 프로그램을.<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="detect-camera.html">
<link rel="import" href="camera-detached.html">
<link rel="import" href="create-welcome.html">
<dom-module id="create-app">
<template>
<style>
:host {
display: block;
}
</style>
<detect-camera found=[[found]]></detect-camera>
<template is="dom-if" if="{{!allowed}}">
<camera-detached></camera-detached>
</template>
<template is="dom-if" if="{{allowed}}">
<create-welcome></create-welcome>
</template>
</template>
<script>
class CreateApp extends Polymer.Element {
static get is() {
return 'create-app';
}
constructor() {
super();
}
static get properties() {
return {
allowed: {
type: Boolean,
computed: '_isAllowed(found)'
}
};
}
_isAllowed(found) {
return found;
}
}
window.customElements.define(CreateApp.is, CreateApp);
</script>
</dom-module>카메라를 감지하는 모든 논리는 감지 카메라입니다. 감지 카메라 안의 코드는 속성 "찾음"속성/속성을 설정합니다.
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="detect-camera">
<template>
</template>
<script>
class DetectCamera extends Polymer.Element {
static get is() {
return 'detect-camera';
}
static get properties() {
return {
found: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
}
}
}
constructor() {
super();
this._foundChanged
}
_foundChanged() {
this.found = true;
}
}
window.customElements.define(DetectCamera.is, DetectCamera);
</script>
</dom-module>은 내가 재산 "가 발견"계산에 따라 "이 허용"계산합니다.
한눈에 'found = [[found]]'따옴표가 누락되었습니다. 또한 100 % 확실하지는 않지만'if {{! allowed}}''에 기대했던대로 작동하지 않을 것이라고 생각합니다. 'this._foundChanged'는 메소드에 대한 유효하지 않은 호출이기도합니다. 마지막으로, 계산 된'isAllowed'를 int로 사용할 수있게하려면'found'에 양방향 바인딩이 필요합니다. – DVM