聚合物Web組件數據綁定JS對象/數組
[英]Polymer webcomponents data binding an js object/array
問題描述
在https://www.polymer-project.org/1.0/上 ，以firebase作為數據源顯示用法。 但是我想使用一個簡單的js變量（數組/對象）作為數據源，例如，一個帶有朋友的數組。 但是我沒有將陣列綁定到聚合物。
如何將js數組作為數據裝箱綁定到聚合物？
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
期望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
如果要在元素聲明之外使用數據綁定，則必須使用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.