in meinem Test, ich habe 3 Elemente aus der Haupt-HTML-Datei importiert:Polymer Globals Attribute etwas Fremdes
<html><head><title>my-app</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/app-globals.html">
<link rel="import" href="/Polymer/my-app/elements/my-categories.html">
<link rel="import" href="/Polymer/my-app/elements/my-items.html">
</head>
<body>
<my-categories></my-categories>
<my-items></my-items>
</body>
</html>
mit 'app-globals.html' zu sein:
<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>
‚my- categories.html ':
<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>
hier, wenn eines der li-Element wird das geklickt 'selectedCategoryId' aktualisiert.
dieser Wert wird durch Globals auf das letzte Element bestanden 'my-items.html':
<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>
in etwas resultierende mir fremd: (.. Dieser $ globals.values) console.dir geben mir die correcte respons: Objekt { selectedCategoryId: "547dfb6578be56f6630041a8" }
jedoch die Auswahl dieses Attribut 'selectedCategoryId' Ergebnisse mit:.. console.log (" 'my-Artikel' -> diese $ globals.values .selectedCategoryId = "+ this. $ .globals.values.selectedCategoryId); gibt mir: 'my-items' -> dies. $. Globals.values.selectedCategoryId = undefined undefined warum?
ich die versäumte Teil des Codes in dem gegebenen Beispiel Bedeutung auf dem Problem, das Sie mit Blick haben glauben. Und ich glaube nicht, dass in dem gegebenen Beispiel 'console.dir (this. $. Globals.values);' 'Objekt {selectedCategoryId:" 547dfb6578be56f6630041a8 "}' da an diesem Punkt die 'this. $. Globals.values 'hat den Wert erhalten. – xbtsw