Polimer globaller i ana html dosyasından içe 3 unsurları var, benim testinde

Question

garip bir şey bağlıyor

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<polymer-element name="app-globals" attributes="data selectedCategoryId selectedItemId"> 
    <script> 
    (function() { 
    var values = {}; 
    Polymer('app-globals', { 
     ready: function() { 
      console.log("app-globals -> ready"); 
      this.values = values; 
      console.dir(this.values); 
     }, 
    }); 
    })(); 
    </script> 
</polymer-element> 

'benim- categories.html ': Buradaki

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="/Polymer/my-app/elements/app-globals.html"> 

<polymer-element name="my-categories"> 
    <template> 
    <app-globals id="globals"></app-globals> 
    <div>selectedCategoryId = {{$.globals.values.selectedCategoryId}}</div> 
    <ul> 
     <template repeat="{{category in categories}}"> 
     <li class="li-category" data-_id="{{category._id}}" on-tap="{{selectCategory}}">{{category.name}}</li> 
     </template> 
    </ul> 
    </template> 
    <script> 
    Polymer('my-categories', { 
    values: {}, 
    ready: function() { 
     var HOST = 'xxx.yyy.zzz.www'; 
     var PORT = '8888'; 
     this.categories = <loaded from websocket>; 
    }, 
    selectCategory: function(event, detail, sender) { 
     var elt = (event.target.nodeName == 'INPUT')? event.target.parentNode : event.target; 
     this.values.selectedCategoryId = elt.dataset._id; 
     this.$.globals.values.selectedCategoryId = elt.dataset._id; 
     return false; 
    } 
    }); 
    </script> 
</polymer-element> 

li elemanının biri tıklandığında 'selectedCategoryId' güncellenir.

bu değer son öğe 'my-items.html' olarak globaller aracılığıyla geçirilir:

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="/Polymer/my-app/elements/app-globals.html"> 

<polymer-element name="my-items"> 
    <template> 
    <app-globals id="globals"></app-globals> 
    <style> 
    </style> 
    <div >selectedCategoryId = {{$.globals.values.selectedCategoryId}}</div> 
    <ul> 
     <template repeat="{{item in items}}" 
       on-category-tap="{{handleCategoryTap}}"> 
     <li class="li-item" data-_id="{{item._id}}" on-click="{{selectItem}}">{{item.title}}</li> 
     </template> 
    </ul> 
    </template> 
    <script> 
    Polymer('my-items', { 
    values: {}, 
    ready: function() { 
     var HOST = 'xxx.yyy.zzz.www'; 
     var PORT = '8888'; 
     console.log("'my-items' -> this.$.globals.values:"); 
     console.dir(this.$.globals.values); 
     for(var prop in this.$.globals.values) { 
     if(this.$.globals.values.hasOwnProperty(prop)) { 
      console.log("this.$.globals.values[" + prop + "] = " + this.$.globals.values[prop] + ""); 
     } 
     } 
     console.log("'my-items' -> this.$.globals.values.selectedCategoryId = " + this.$.globals.values.selectedCategoryId); 
    }, 
    handleCategoryTap: function(event) {..., 
    selectItem: function(event) {...} 
     return false; 
    } }); 
    </script> 

bana garip bir şey sonuçlanan: (.. Bu $ globals.values) console.dir vermek beni correcte tepk: Nesne { selectedCategoryId: "547dfb6578be56f6630041a8" }

Ancak bu özelliğin ile 'selectedCategoryId' sonuçları seçerek:.. console.log (" 'my-ürün' -> Bu $ globals.values .selectedCategoryId = "+ bu. $ .globals.values.selectedCategoryId); bana verir: 'öğelerim' -> bu. $. Globals.values.selectedCategoryId = tanımsız undefined neden?

Answer 1

Ben kullanmak tavsiye: https://github.com/akc42/akc-meta

Ben yerel veri bağlama ile DOM genelinde bilgi paylaşmak için kullanabilirsiniz vermedi! https://github.com/MeTaNoV/firebase-element-extended