7
두 개의 뷰 (폴리머 요소)가 예를 들어 모델을 공유하기를 원한다고합니다.MV * 중합체, 모델 및 서비스에서 중합체 요소?
Angular에서 모델은 동일한 소스에서 읽은 두보기 모두보기로 주입되는 싱글 톤 서비스에서 살 것입니다.
나는 내가 뭔가를 할 수있는 고분자이 접근 방식을 모방하려고 : 그것은 종속성을 정의하는 선언적인 방법, 그리고 기본적으로 밖으로 "<core-ajax> 및 기타와 동일하게 작동하기 때문에
<polymer-element name="view1">
<template>
<my-model></my-model>
...
</template>
...
</polymer-element>
<polymer-element name="view2">
<template>
<my-model></my-model>
...
</template>
...
</polymer-element>
나는이 방법을 좋아한다 상자의 "고분자 요소.
이 방법을 사용하면 템플릿에 선언 된 요소와 인터페이스하기 전에 domReady 라이프 사이클 콜백을 기다려야하므로 여기에 초 기 초기화 논리가 있습니다. 문제는이 콜백이 각 <my-model> 요소에 대해 한 번 호출된다는 것입니다 (따라서 <my-model>은 <view1>과 <view2>에 모두 있기 때문에이 예제에서는 두 번 초기화됩니다). 내 모델 나는이 같은 요소 인스턴스의 외부 뭔가를 상태를 이동해야 싱글 톤 패턴은 다음과 있는지 확인하십시오 :
<polymer-element name="my-model">
<script>
(function(){
// private shared state
var instances = [], registered; // pattern variables
var foo; // state, model, whatever
// element init logic
Polymer('my-model', {
// Polymer callbacks
domReady: function(){
if (registered === (registered=true)) return;
// singleton init logic
foo = 'something';
// event handlers
this.addEventListener('foo', function(){ foo += 'baz'; });
},
attached: function() { instances.push(this); },
detached: function(){
instances = instances.filter(function(instance){
return instance !== this;
}.bind(this));
},
// element API
update: doSomething,
get state() { return foo; }
});
// private functions
function doSomething(){ foo += 'bar' }
})();
</script>
</polymer-element>
그래서 작동을하지만 나에게 잘못 보인다. <polymer-element>을 사용하는 것이 일반적으로 싱글 톤 패턴과 호환되지 않습니까? 모델과 서비스를 위해 Polymer에서 벗어나야합니까? 폴리머 핵심 요소는 어떻게 제거됩니까?
[편집] 위의 초기화 코드에 이벤트 리스너를 추가했습니다. 여러 인스턴스에서 여러 번 트리거되는 리스너를 피하기 위해 하나의 인스턴스에만 등록됩니다. 이벤트 처리기가 선언 된 인스턴스가 제거되면 어떻게됩니까? 비동기 논리를 깨지 않을 것입니까?
:
또 다른 방법은 폴리머 코어 메타 요소를 사용하는 것입니다. https://www.polymer-project.org/docs/polymer/polymer.html#global – ebidel
이벤트 리스너가 특정 인스턴스에 등록되고 나중에 해당 인스턴스가 제거되면 어떻게됩니까? 다른 인스턴스가 잘리지 않습니까? – Renaud