推送到dom-repeat中使用的数据绑定数组(Polymer) [英] Pushing to data-bound array used in dom-repeat (Polymer)
本文介绍了推送到dom-repeat中使用的数据绑定数组(Polymer)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在自定义Polymer元素中有一个数据绑定数组( dom-repeat
),我需要将新数据推送到数组中。它不显示项目,即使它知道添加了2个元素。我在这里缺少什么?
I have a data-bound array (dom-repeat
) in a custom Polymer element, and I need to push new data into the array. It's not displaying the items, even though it knows 2 elements have been added. What am I missing here?
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="main-element">
<template>
<ul>
<template is="dom-repeat" items="{{people}}">
<li>{{item.first}}</li>
</template>
</ul>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'main-element',
properties: {
people: {
type: Array,
value: function() {
return [];
}
}
},
ready: function() {
// Mock data retrieval
this.people.push({"first": "Jane", "last": "Doe"});
this.people.push({"first": "Bob", "last": "Smith"});
}
});
})();
</script>
推荐答案
使用Polymer的阵列变异方法将项目推入数组时:
Use Polymer's array mutation methods when pushing items into the array:
this.push('people', {"first": "Jane", "last": "Doe"});
this.push('people', {"first": "Bob", "last": "Smith"});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<main-element></main-element>
<dom-module id="main-element">
<template>
<ul>
<template is="dom-repeat" items="{{people}}">
<li>{{item.first}}</li>
</template>
</ul>
</template>
<script>
HTMLImports.whenReady(function() {
'use strict';
Polymer({
is: 'main-element',
properties: {
people: {
type: Array,
value: function() {
return [];
}
}
},
ready: function() {
// Mock data retrieval
this.push('people', {"first": "Jane", "last": "Doe"});
this.push('people', {"first": "Bob", "last": "Smith"});
}
});
});
</script>
</dom-module>
</body>
< a href =http://codepen.io/tony19/pen/VmKKbd?editors=1000\"rel =nofollow noreferrer> codepen
这篇关于推送到dom-repeat中使用的数据绑定数组(Polymer)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文