如何将对象文字作为聚合物属性传递
[英]How to pass object literals as polymer attributes
问题描述
In order to test some polymer custom elements of mine in isolation, I would like to be able to pass in js object literals for some attributes that would ordinarily come from parent elements. 
为了单独测试我的一些聚合物自定义元素，我希望能够传递js对象文字以获取通常来自父元素的一些属性。 I'm having trouble figuring out how to do this. 我无法弄清楚如何做到这一点。 See this example code. 请参阅此示例代码。 If it were working as I would like it to, it would display a 1 and a 2 next to each other, but it doesn't work. 如果它按照我的意愿工作，它会显示1和2彼此相邻，但它不起作用。
<script src="http://www.polymer-project.org/webcomponents.js"></script> <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <polymer-element name="my-element" attributes="stuff"> <template> {{stuff.one}} {{stuff.two}} </template> <script> Polymer('my-element', { ready: function () { console.log(this.stuff); } }); </script> </polymer-element> <my-element stuff='{"one": 1, "two": 2}'></my-element>
3 个解决方案
解决方案1
9 已采纳 2014-11-14 11:00:42
Polymer only converts the JSON text into an object, if you initialize the stuff property with an empty hash: 如果使用空哈希初始化stuff属性，Polymer仅将JSON文本转换为对象：
Polymer('my-element', {
stuff: {},
ready: function () {
console.log(this.stuff);
}
});
Without this, the stuff attribute is passed in as a string. 如果没有这个， stuff属性将作为字符串传递。 The same goes for arrays. 数组也是如此。
解决方案2
6 2015-10-31 21:59:11
Another way to do it: 另一种方法：
myElem.html myElem.html
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="my-element">
<template>
<div> {{stuff.one}} {{stuff.two}} </div>
</template>
<script>
Polymer({
is: "my-element",
properties: {
stuff:{
type: Object,
value: {"one":"default_1","two":"default_2"}
}
}
});
</script>
</dom-module>
index.html 的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="myElem.html">
</head>
<body>
<my-element></my-element>
<my-element stuff={"one":"1","two":"2"}></my-element>
</body>
</html>
Result 结果
default_1 default_2
1 2
解决方案3
3 2015-05-15 10:59:29
index.html
...
<body unresolved fullbleed layout vertical>
<my-post info='{"name":"Alex","id":"123"}' posts='[{"id":"456","name":"post1"},{"id":"789","name":"post2"}]'></my-post>
</body>
...
my-post.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="my-post" attributes="info posts" >
<template>
{{info.name}}
<template repeat="{{post in posts}}">
<br> {{post.id}} - {{post.name}}
</template>
</template>
<script>
(function () {
Polymer({
ready: function() {
this.info=JSON.parse(this.info)
this.posts=JSON.parse(this.posts)
},
});
})();
</script>
</polymer-element>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.