Polymer 聚合物球的属性有些奇怪_Polymer_Globals

Polymer 聚合物球的属性有些奇怪

polymer

Polymer 聚合物球的属性有些奇怪,polymer,globals,Polymer,Globals,在我的测试中，我从主html文件导入了3个元素： <html><head><title>my-app</title> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="elements/app-globals.html"> &l

在我的测试中，我从主html文件导入了3个元素：

    <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>

我的应用程序

“app globals.html”为：

    <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>


（功能（）{
var值={}；
聚合物（“app-globals”{
就绪：函数（）{
log（“appglobals->ready”）；
这个值=值；
console.dir（this.values）；
},
});
})();

“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>


selectedCategoryId={{$.globals.values.selectedCategoryId}

点击{{selectCategory}>{{category.name}

聚合物（“my-categories”{
值：{}，
就绪：函数（）{
var HOST='xxx.yyy.zzz.www'；
变量端口='8888'；
这个是.categories=；
},
选择类别：功能（事件、详细信息、发件人）{
var elt=（event.target.nodeName='INPUT'）？event.target.parentNode:event.target；
this.values.selectedCategoryId=elt.dataset.\u id；
此.$.globals.values.selectedCategoryId=elt.dataset.\u id；
返回false；
}
});

单击其中一个li元素时，将更新“selectedCategoryId”

此值通过globals传递到最后一个元素“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>


selectedCategoryId={{$.globals.values.selectedCategoryId}

{{item.title}”

聚合物（“my-items”{
值：{}，
就绪：函数（）{
var HOST='xxx.yyy.zzz.www'；
变量端口='8888'；
log（“'my-items'->this.$.globals.values:”）；
console.dir（this.$.globals.values）；
for（此$.globals.values中的var prop）{
if（this.$.globals.values.hasOwnProperty（prop））{
log（“this.$.globals.values[“+prop+”]=”+this.$.globals.values[prop]+”）；
}
}
console.log（“'my-items'->this.$.globals.values.selectedCategoryId=“+this.$.globals.values.selectedCategoryId”）；
},
handleCategoryTap:函数（事件）{。。。，
selectItem:函数（事件）{…}
返回false；
}  });

这让我觉得很奇怪： console.dir（this.$.globals.values）为我提供正确的响应：反对{ 所选类别ID：“547dfb6578be56f6630041a8” }

但是，选择此属性“selectedCategoryId”会导致： console.log（“'my-items'->this.$.globals.values.selectedCategoryId=“+this.$.globals.values.selectedCategoryId”）；给我： “我的项目”->this.$.globals.values.selectedCategoryId=未定义原因不明？

我建议您使用：

我确实使用它通过本地数据绑定在DOM中共享信息

如果您想要一个工作示例，请参阅我的项目：

我相信给定示例中代码中省略的部分对您所面临的问题具有重要意义。我不认为在给定的示例中

console.dir（this.$.globals.values）

将打印

对象{selectedCategoryId:“547dfb6578be56f6630041a8”}

，因为此时

this.$.globals.values

尚未收到该值。