Polymer Templatizer 인스턴스와 호스트 간의 데이터 바인딩

Question

Polymer templatizer를 사용하여 템플릿의 단일 인스턴스를 만들고이를 div에 추가하고 호스트와이 인스턴스간에 작동하도록 데이터 바인딩을 얻지 만 얻는 데 어려움이 있습니다. 이게 작동합니다.

내가 시도하는 가장 간단한 예 :

HTML

<dom-module id="test-app"> 
    <paper-input label="host" value="{{test}}"></paper-input> 
    <template id="template"> 
    <paper-input label="instance" value="{{test}}"></paper-input> 
    </template> 
    <div id="placehere"></div> 
</dom-module> 

JS

Polymer({ 
    is: "test-app", 
    behaviors: [Polymer.Templatizer], 
    properties: { 
    test: { 
     type: String, 
     value: 'hello', 
     notify: true, 
    }, 
    }, 

    ready: function() { 
    this.templatize(this.$.template); 
    var clone = this.stamp({test: this.test}); 
    Polymer.dom(this.$.placehere).appendChild(clone.root); 
    }, 
}); 

위의 아이디어는, 템플릿의 인스턴스를 생성 "placehere"으로 배치하는 것입니다

두 개의 입력 텍스트 상자를 동기화 상태로 유지하십시오.

페이지가로드되면 인스턴스가 성공적으로 만들어지고 두 텍스트 상자의 값은 모두 "hello"이지만 입력 상자를 변경하면 아무 것도 수행되지 않습니다.

폴리머 페이지의 문서는 경량 조금 보인다 https://www.polymer-project.org/1.0/docs/api/Polymer.Templatizer 을하지만 _forwardParentProp 및 _forwardParentPath의 사용을 언급하고있다. 내 상황에서 정확히 어떻게 구현해야합니까?

Answer 1

이미 알아 냈으므로 몇 가지 Templatizer 메소드를 구현해야합니다. 특히, _forwardParentProp 및 _forwardParentPath 방법.

하지만 시작하기 전에 사용자 정의 요소 정의에서 한 가지 추가 오류를 지적해야합니다. dom-module 요소에는 템플릿없이 요소의 내용이 정의되어 있습니다. template 요소 내에 모든 것을 래핑하는 것이 필수적입니다. 사용자 정의 요소의 고정 된 버전은 다음과 같습니다

<dom-module id="test-app"> 
    <template> 
    <paper-input label="host" value="{{test}}"></paper-input> 
    <template id="template"> 
     <paper-input label="instance" value="{{test}}"></paper-input> 
    </template> 
    <div id="placehere"></div> 
    </template> 
</dom-module> 

가 Templatizer 방법의 구현에 관해서는, 당신이 먼저 스탬프 인스턴스를 저장해야

. 그 후, 구현이 필요한 두 가지 방법 모두 다소 단순한 단일 라이너입니다. http://jsbin.com/saketemehi/1/edit?html,js,output

:

여기

Polymer({ 
    is: "test-app", 
    behaviors: [Polymer.Templatizer], 
    properties: { 
    test: { 
     type: String, 
     value: 'hello', 
     notify: true, 
    }, 
    }, 

    ready: function() { 
    this.templatize(this.$.template); 
    var clone = this.stamp({test: this.test}); 
    this.stamped = clone.root.querySelector('*'); // This line is new 
    Polymer.dom(this.$.placehere).appendChild(clone.root); 
    }, 

    // This method is new 
    _forwardParentProp: function(prop, value) { 
    if (this.stamped) { 
     this.stamped._templateInstance[prop] = value; 
    } 
    }, 

    // This method is new 
    _forwardParentPath: function(path, value) { 
    if (this.stamped) { 
     this.stamped._templateInstance.notifyPath(path, value, true); 
    } 
    }, 
}); 

가 작동 JSBin 데모입니다 : 여기

사용자 정의 요소의 전체 자바 스크립트 부분입니다