聚合物Web组件数据绑定JS对象/数组
[英]Polymer webcomponents data binding an js object/array
问题描述
On https://www.polymer-project.org/1.0/ the show the usage with firebase as datasource. 
在https://www.polymer-project.org/1.0/上 ，以firebase作为数据源显示用法。 However I'd like to use a simple js variable (array/object) as datasource eg an array with friends. 但是我想使用一个简单的js变量（数组/对象）作为数据源，例如，一个带有朋友的数组。 However I'm not getting the array bound to the polymer. 但是我没有将阵列绑定到聚合物。
How can I bind an js array as data bining to an polymer? 如何将js数组作为数据装箱绑定到聚合物？
Example HTML Page index.html HTML页面示例index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="friends-list.html">
</head>
<body>
<h1>Hello Data Object Arry Binding</h1>
<script>
var friends = [
{"name":"manual"},
{"name":"john"},
{"name":"doe","starred":true}
];
</script>
<friend-list data="friends"></friend-list>
</body>
</html
with expecting friend-list.html polymar may be something like this: 期望friend-list.html polymar可能是这样的：
<dom-module id="friend-list">
<link rel="import" type="css" href="friend-list.css">
<template>
<template is="dom-repeat" items="{{data}}">
<contact-card starred="{{item.starred}}">
<img src="{{item.img}}">
<span>{{item.name}}</span>
</contact-card>
</template>
</template>
<script>
Polymer({
is: 'friend-list',
properties: {
data: Object
}
});
</script>
</dom-module>
1 个解决方案
解决方案1
0 2015-11-05 00:06:49
You have to use dom-bind template if you want to use data binding outside of an element declaration. 如果要在元素声明之外使用数据绑定，则必须使用dom-bind模板。
<template is="dom-bind" id="app">
<h1>Hello Data Object Arry Binding</h1>
<friend-list data="{{friends}}"></friend-list>
</template>
<script type="text/javascript">
var app = document.getElementById('app');
app.friends = [
{"name":"manual"},
{"name":"john"},
{"name":"doe","starred":true}
];
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.