gpt4 book ai didi

polymer 全局属性有些奇怪

转载 作者:行者123 更新时间:2023-12-04 12:58:12 26 4
gpt4 key购买 nike

在我的测试中,我从主 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>

“我的类别.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>

在这里,当单击 li 元素之一时,“selectedCategoryId”会更新。

该值通过全局变量传递给最后一个元素“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>

导致我感到奇怪:
console.dir(this.$.globals.values) 给我正确的回应:
目的 {
selectedCategoryId:“547dfb6578be56f6630041a8”
}

但是,选择此属性“selectedCategoryId”会导致:
console.log("'我的项目' -> this.$.globals.values.selectedCategoryId = "+ this.$.globals.values.selectedCategoryId);
给我:
“我的项目”-> this.$.globals.values.selectedCategoryId = undefined
未定义为什么?

最佳答案

我建议您使用:https://github.com/akc42/akc-meta

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

如果您想要一个工作示例,请查看我的项目:https://github.com/MeTaNoV/firebase-element-extended

关于 polymer 全局属性有些奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27378605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com