Google Polymer ile alt özellikleri bağlama

Question

Alt özelliklerin Google Polymer ile otomatik olarak bağlanması mümkün mü? AngularJS gibi bir şey. Bu prop1 ve güncellemeleri o 2sn sonra özellik içeren unsurdur

: Burada

küçük bir örnektir

<dom-module is="test-elem"> 

    <script> 
     TestElem = Polymer({ 
      is: "test-elem", 

      properties: { 
       prop1: { type: String, value: "original value", notify: true } 
      }, 

      factoryImpl: function() { 
       var that = this; 

       setTimeout(function(){ 
        that.prop1 = "new value"; 
       }, 2000); 
      } 
     }); 
    </script> 

</dom-module> 

Ve bu bir öğe oluşturur ana sayfa, ve dom içinde Prop1 gösterir:

<template is="dom-bind" id="main-page"> 

    <span>{{test.prop1}}</span> 

</template> 

<script> 
    var scope = document.getElementById('main-page'); 

    var t = new TestElem(); 

    scope.test = t; 

</script> 

Maalesef pag e yeni değerle güncellenmiyor. Bunu otomatik olarak bağlamanın bir yolu var mı? Bulduğum http://jsfiddle.net/xkqt00a7/

Answer 1

kolay yolu bir olay işleyicisi eklemek oldu: İşte

bir jsfiddle olan

t.addEventListener('prop1-changed', function(e){ 
     scope.notifyPath('test.prop1', e.currentTarget.prop1) 
}); 

http://jsfiddle.net/83hjzoc3/

Ama angularjs gibi otomatik değil.

Answer 2

Nedenini açıklayamıyorum, ancak örneğinizi setTimeout'tan this.async'e çevirmeniz çalışmasını sağlar.

Answer 3

Sayfa kapsamının bir alt özelliği olarak ciltlenmesi, bağlama kapsamındaki notifyPath ('test.prop1', value) öğesini elle çağırmanız gerektiğinden otomatik olarak çalışmaz. Bunu yapmanın bir yolu, bağlayıcı kapsamı TestElem kurucusuna iletmektir. Bir ana öğeye otomatik olarak bağlanırsanız, bunun endişelenmenize gerek olmadığını unutmayın. Bu son durumda güncelleme otomatiktir.

Aşağıdakiler çalışır ve iki bağlama ve güncelleştirme yöntemini gösterir. Biri otomatik, diğeri yapıcıya iletilen bağlama kapsamı üzerinde bir notifyPath çağrısı gerektirir.

TestElem = Polymer({ 
    is: "test-elem", 

    properties: { 
     prop1: { 
     type: String, 
     value: "original value", 
     notify: true 
     } 
    }, 

    ready: function() { 
     var that = this; 
     setTimeout(function() { 
     that.prop1 = "new value (via ready)"; 
     }, 2000); 
    }, 

    factoryImpl: function (app) { 
     setTimeout(function() { 
     app.notifyPath('test.prop1', 'new value (via app scope)'); 
     }, 2000); 
    } 
    }); 

.. sonra elemanını iki yoldan birini referans:

"app" ana sayfanın küresel bağlama kapsamı

<test-elem prop1="{{prop1value}}">{{prop1value}}</test-elem> 
    <div>{{test.prop1}}</div> 
    <script> 
    app.test = new TestElem(app); 
    </script> 

(ör index.html bir üst düzey eleman olarak, polimer starter kit demo uygulamasında yapıldığı gibi).

aşağıdaki iki saniye hem özellikler güncelleme ve otomatik olarak güncellenir html göründükten sonra:

new value (via ready) 
new value (via app scope)