gpt4 book ai didi

javascript - 推送到 dom-repeat 中使用的数据绑定(bind)数组( polymer )

转载 作者:行者123 更新时间:2023-11-30 15:42:20 25 4
gpt4 key购买 nike

我在自定义 Polymer 元素中有一个数据绑定(bind)数组 (dom-repeat),我需要将新数据推送到数组中。它不显示项目,即使它知道已添加 2 个元素。我在这里缺少什么?

jsFiddle

<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 的 array mutation methods将项目插入数组时:

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>

codepen

关于javascript - 推送到 dom-repeat 中使用的数据绑定(bind)数组( polymer ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40622982/

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