聚合物2.x: dom-repeat没有观察到对计算数组的子数组的更改
聚合物2.x是一个流行的前端开发框架，用于构建Web应用程序。dom-repeat是聚合物框架中的一个模板元素，用于在DOM中重复渲染一个模板，并根据数据的变化自动更新DOM。
在这个问题中，问题描述了dom-repeat没有观察到对计算数组的子数组的更改。这意味着当计算数组的子数组发生变化时，dom-repeat没有自动更新DOM。
为了解决这个问题，可以采取以下步骤：
- 确保计算数组的子数组是可观察的：在聚合物中，可以使用Polymer的observers或computed properties来实现可观察性。通过将子数组定义为可观察属性，当子数组发生变化时，dom-repeat将能够检测到并更新DOM。
- 更新计算数组的子数组时，确保触发属性变化通知：当子数组发生变化时，需要手动触发属性变化通知，以便dom-repeat能够检测到变化并更新DOM。可以使用Polymer的set()方法或notifyPath()方法来触发属性变化通知。
- 确保正确使用dom-repeat的key属性：dom-repeat的key属性用于标识重复的元素，以便在更新DOM时进行准确的匹配。确保在使用dom-repeat时，为每个重复的元素提供唯一的key值，以避免更新DOM时出现错误的匹配。
总结： 聚合物2.x是一个前端开发框架，dom-repeat是其中的一个模板元素，用于重复渲染模板并根据数据变化自动更新DOM。当dom-repeat没有观察到对计算数组的子数组的更改时，可以通过确保子数组是可观察的、触发属性变化通知以及正确使用dom-repeat的key属性来解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云计算产品：https://cloud.tencent.com/product
- 腾讯云数据库产品：https://cloud.tencent.com/product/cdb
- 腾讯云服务器产品：https://cloud.tencent.com/product/cvm
- 腾讯云人工智能产品：https://cloud.tencent.com/product/ai
- 腾讯云物联网产品：https://cloud.tencent.com/product/iot
- 腾讯云存储产品：https://cloud.tencent.com/product/cos
- 腾讯云区块链产品：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙产品：https://cloud.tencent.com/product/vr
相关·内容
所以我想做的基本上是使用JS和高分子功能来实现购物车。
这是我的元素(简化)。
商店-购物车
<template>
<div class="shoppingMainContainer">
<div class="cartTitle">Cart</div>
<paper-dialog-scrollable>
<template is="dom-repeat" items="{{shoppingList}}">
&l
浏览 5提问于2016-08-27得票数 3
简单的例子：
<template is="dom-repeat" items="{{items}}">
<template is="dom-repeat" items="{{item.subitems}}">
<span>{{item}}</span>
</template>
<span on-tap="add">ADD</span>
</template>
attached:
浏览 1提问于2015-06-10得票数 1
回答已采纳
在聚合物中，我使用一个函数来计算dom-repeat的项目
<template is="dom-repeat" items="[[first4People(people, people.*)]]">
<div>
First: <span>[[item.first]]</span>
Last: <span>[[item.last]]</span>
</div>
</template>
但是，无论我尝试什么，当我更改people的子属性(例如peo
浏览 4提问于2016-12-01得票数 0
回答已采纳
我创建了一个“子”元素，由我的自定义“父”元素使用。在“父”元素中，我的子元素标记如下所示：
<child-element fruits="{{fruits}}"></child-element>
成果是“父”元素中的数组，而不是“子”元素的属性。在我的“子”元素中，我有以下内容：
<template is="dom-repeat" items="[[fruits]]">
<paper-card>[[item.flavor]]</paper-card>
</template&g
浏览 3提问于2015-09-02得票数 0
回答已采纳
我试图使用dom-repeat模板呈现一个动态的项目列表，如下所示：
<template is="dom-repeat" items={{numbers}} as="anumber" >
<div>
{{anumber}}
<paper-button class="deleteThisNumber" index={{index}}></paper-button>
</div>
</template>
<paper-button id="a
浏览 2提问于2017-08-25得票数 0
1回答
在这种情况下，我通过web套接字获取数据，性能非常重要。从文档中我了解到，有各种方法可以将我收到的数据“推送”给我的聚合物元素，但我很好奇哪一种方法最有效。到目前为止，我已经创建了一个可以包含在模板中的元素，其中父元素将观察data属性中的任何更改并做出相应的反应。我也尝试过使用一种行为来完成同样的事情，尽管它不需要在模板中包含一个"data-element"，它只需要观察它自己的数据属性。我意识到，我也可以使用类似iron-signals的东西通过事件“推送”数据。
我不确定这些方法是否非常有效，因为大多数情况下，对"data“对象的更改只适用于所有观察者中的一小部分
浏览 2提问于2015-10-26得票数 1
回答已采纳
1回答
使用PolymerTS扩展。我试图使用通配符符号观察数组的更改：
@component("ha-tags")
class HaTags extends polymer.Base implements polymer.Element {
@property({ type: Array, notify: true })
public tags: Array<HaTag> = [];
@observe("tags.*")
tagsChanged(changeRecord) {
alert(changeRec
浏览 1提问于2015-10-01得票数 2
回答已采纳
我正在尝试将一个数组直接绑定到一个聚合物2组件模板。它一开始可以工作，但随后它不会检测到变化。我正在使用this.push方法，以允许聚合物检测变化，但它不起作用。绑定到dom-repeat模板没问题。
在这里你可以找到一个柱塞：
有没有可能做我正在尝试的事情？我做错了什么？
谢谢你的帮助
浏览 4提问于2018-01-17得票数 0
回答已采纳
默认情况下，dom-repeat数组仅在数组本身发生变化或项本身更改了与其观察者相对应的属性时才重新过滤和重新排序：。
当排序函数本身改变时，有没有触发排序函数的方法？例如，当您想要从升序改为降序时，也称为更改排序功能。
浏览 0提问于2015-11-06得票数 1
2回答
我在学聚合物。一个挑战我的项目是更新数组的项目。我希望有一个CDN的聚合物，以便我可以把小提琴。不过，现在我有一个定义如下的元素：
my-element.html
<dom-module id="my-element">
<button on-click="onLoadData">Load Data</button>
<button on-click="onTest1Click">Test 1</button>
<button on-click="onTes
浏览 1提问于2015-12-09得票数 2
回答已采纳
我正在尝试使用dom-repeat中的dom-if来完成条件绑定。下面是我的代码：
<template is="dom-repeat" items="{{customers}}">`
<template is="dom-if" if="_continueLoop(index)" indexAs="index">
Data renders here
</template>
</template>
函数_continueLo
浏览 0提问于2015-11-30得票数 3
1回答
Dom-重复动态标头
、、、
我正在使用聚合物从一个消防数据库中获取数据并显示在屏幕上。这样做的目的是获得一个日期列表，并在日期之上显示标题，每次都是一个新的月份。
例如，将生成以下列表(如果正确生成，日期的格式为dd/mm/yyyy)：
January
01-01-2015
05-01-2015
February
02-02-2015
April
02-04-2015
我有以下代码来生成日期：
<template is="dom-repeat" items="[[dates]]" as="date">
<date this-date="
浏览 4提问于2015-11-29得票数 0
回答已采纳
1回答
我创建了一个简单的原型，用于显示和编辑人员列表。在这里可以找到原型：。
如您所见，当按下"Save“时，将使用将该项写回数组。我不确定这是否真的需要，因为对象总是通过引用来分配的。
但是，“保存”按钮不会更新列表中的项。但是，当您再次编辑它时，新更改的值将以某种方式保留在表单中。我想这种改变确实发生在内存中，但是dom-repeat不会触发列表的新呈现。
我还在observe上设置了dom-repeat属性，但它似乎没有任何区别。
我的问题是双重
需要更改哪些内容，以便在保存项目时更新列表。
是否有更好的方法(常用的最佳实践)来管理项目列表(使用双向数据绑定)。
浏览 2提问于2016-04-06得票数 4
我试图将Polymer属性绑定到CheckBox的禁用属性，但是CheckBox在开始时才被禁用/启用。
我必须指出，我绑定到的属性是Polymer属性的子属性。
组件的代码：
<link rel="import" href="../polymer/polymer.html"/>
<dom-module id="checkbox-disabled-example">
<template>
<button
on-click="onClick" >
浏览 2提问于2016-08-28得票数 3
回答已采纳
我在谷歌聚合物网站上尝试过深度路径观察的例子，但它对我的情况不起作用。我想要观察的子属性是一个数组，当我转到不同的散列url时，该数组会被更改。问题是，我使用的是一个处理变化的库，这样它就不会使用聚合物的“推、弹、移和剪接”，否则，聚合物就不会识别阵列突变。任何想法都将不胜感激！
浏览 4提问于2015-09-08得票数 0
回答已采纳
当我的元素发生变化时，或者我想从代码中或自动地重新运行排序和呈现元素时，我该如何重新运行呢？谢谢
<template is="dom-repeat" items="[[attachments]]" as="attach_item" sort="_sortItems"></template>
浏览 0提问于2015-11-10得票数 0
我在聚合物组件中有一个类型为数组的属性"dataArray“。这个数组有另一个数组"items“。我使用dom-repeat来循环遍历"dataArray“，还使用嵌套的dom-repeat来遍历"dataArray”中每个对象的"items“数组。
dataArray看起来像
[{'name': 'abc', items: [{'name': 'abc1'} , {'name': 'abc2'}]},
{'name': 'xyz&
浏览 3提问于2017-11-02得票数 0
我想在post数据中显示一个对象内容(注释)(使用firebase-collection)：下面是firebase中post的结构：
"Publication" : {
"date":"22-06-2015",
"content" : "post example",
"comments": {
//a post has too many comments on it
}
}
我的目标是添加另一个dom-repeat来显示评论，但我看不到任何东西。下面是代码示例(第一个模板可
浏览 4提问于2015-06-22得票数 3
我有一个dom-repeat和另一个嵌套在其中的dom-repeat。外层绑定到一个计算数组。当我对父数组进行更改时，会观察到这些更改(意味着触发了观察者代码)，但这些更改不会反映在UI/dom-repeat中。
下面是我的代码示例。单击第二个dom-repeat内的div将触发函数handleItemTap，然后该函数将对父数组进行更改。然后观察此更改，并重新计算计算的数组；但是，将IsChecked添加到父对象不会影响UI中的复选框，该复选框应绑定到IsChecked属性。我做错了什么？
<template is="dom-repeat"
item
浏览 14提问于2018-02-21得票数 1
回答已采纳
我有一个如下代码片段，尝试将属性向下传递给子元素，如下所示： <dom-repeat items="{{employees}}" as="employee">
<template>
<child-element employee={{employee}}> </child-element>
</template>
</dom-repeat> 其中employee是数组类型(取自聚合物教程)。 employees: {
type: Array,
notify:
浏览 29提问于2020-07-23得票数 1
1回答
我正在尝试使用iron-ajax检索一个JSON文件，以便创建一个导航折叠菜单。到目前为止，这在“顶级”标题中读得很好，但我正在努力返回子菜单名称。
我想知道我是否需要在nav-head元素中嵌套一个模板dom-repeat，但到目前为止还没有成功。
JSON示例：
{
"headers": [
{
"name": "Header One",
"sub": [
{
"name": "Sub Heading One"
},
{
浏览 2提问于2016-02-10得票数 0
2回答
我想要读取一个json文件，该文件存在于我的系统本地，在我的聚合物元素中。目前，我已经将json结构放在了元素的任务属性中(作为第一步)，.I正在使用'dom-repeat‘来解析json。但是仍然看不到输出中的任何内容。
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span>{{item}}</span></li>
</template>
<template is="do
浏览 2提问于2016-05-16得票数 1
1回答
我试图从一个字符串数组中创建面包屑。我有一个名为taxonomy的数组属性，它看起来像["categories", "clothing", "men", "suits"]。像这样使用dom-repeat：
<template is="dom-repeat" items="{{taxonomy}}" id="breadcrumbs">
<span>{{item}}</span><span hidden$="[[computeSpan
浏览 0提问于2015-09-02得票数 5
回答已采纳
2回答
我正在尝试编写一个组件，该组件公开来自高分子中AJAX调用的数据。我想以这样的方式结束。
<get-db data={{data}}></get-db>
<template is="dom-repeat" items="{{data}}">
<div>{{item}}</div>
</template>
但是，当我在另一个元素中从data组件公开get-db属性时，数据不会绑定到dom-repeat模板。
get-db组件部分如下
<iron-ajax id="
浏览 4提问于2018-02-10得票数 0
1回答
Firebase聚合物负载状态
、、、、
如果我使用firebase查询，我如何在数据加载时显示微调器，并在数据未加载时摆脱它。一个很好的演示会很有帮助。我似乎在文档里找不到任何东西。
<firebase-query
id="query"
path="/category"
data="{{viewcategory}}">
</firebase-query>
比如下面的查询
这个dom-repeat
<template is="dom-repeat" items="[[viewcategory]]"
浏览 3提问于2017-02-06得票数 2
3回答
我有一个dom-repeat元素，当呈现这个元素时，它只填充了一个name属性，并且price将被一个ajax填充：
<template is="dom-repeat" id="myId" items="{{arr}}">
<div>[[item.name]]</div>
<div>[[item.price]]</div>
</template>
问题是在收集响应后不会呈现price。
我试过：
document.querySelector(
浏览 2提问于2016-02-07得票数 4
1回答
今天很多聚合物1.0的问题，
我的HTML看起来如下：
<section class="layout vertical" id="onlineList">
<paper-item class="subdue layout horizontal center">Online Now</paper-item>
<template is="dom-repeat" items="{{cats}}" as="cat">
浏览 2提问于2015-08-17得票数 0
回答已采纳
3回答
我有一个简单的<firebase-query>标记，在通过<dom-repeat>显示数据之前，我想对其中的一些数据进行操作。例如，我需要将一些字段转换为链接，并解析一些日期。
因此，当数据准备好后，我需要得到它，循环遍历每一项，并更改一些值。
为了做到这一点，我在数据上有一个观察者来检测它何时准备就绪。但是，我不知道如何循环处理来自JavaScript函数的数据。由于某些原因，for(var i in items)无法工作，尽管项目确实存在。
以下是组件：
<dom-module id="cool-stuff">
<templa
浏览 5提问于2017-01-03得票数 3
回答已采纳
2回答
在这种情况下，我需要从dom-repeat中调用一个方法。下面是我的代码
<template is='dom-repeat' items="[[_dataArray]]" as="rowItem">
<template is='dom-repeat' items="[[_objectArray]]" as="columnItem">
<template>
<span>[[_getColumnItem
浏览 3提问于2016-10-15得票数 2
3回答
在聚合物1.2.3中，dom-repeat是否可以使用内容作为模板并将值绑定到所提供的元素？
定制元素：
<dom-module id="modify-collection">
<template>
<div>
<template is="dom-repeat" items="[[collection]]">
<content></content>
</template>
</div>
&
浏览 6提问于2016-01-06得票数 19
回答已采纳
我有这个应用程序，其中包含许多类型的聚合物元素，可以添加到一个主要的聚合物应用程序元素。这个主元素管理这些元素的实例，并在UI中显示它们。
例如：
item1.html
item2.html
item3.html
my-app.html
当我添加新的项目类型时(例如。( item4.html)，我需要对主UI进行一些更改，以处理创建、管理和显示它们。每个类型都是唯一的，因此我不希望将它们合并为单个项类型。
我想做的是让每个聚合物元素“注册”到我的应用程序中，调用一个函数，该函数可以向数组中添加一个新的对象。
为此，我的应用程序将有一个名为itemMap的属性，它是一个对
浏览 1提问于2018-01-10得票数 1
1回答
我有一个生成表行的dom-repeat模板，其中一个行单元格包含一个按钮，当行值具有一定值时，我希望禁用该按钮。因此，我的组件有以下代码，它使用计算绑定来设置按钮的disabled属性的值：
<template is="dom-repeat" items="{{list}}" as="ticket">
<tr class$="{{ticket.status}}">
<td class="actions">
<paper-ico
浏览 2提问于2016-04-22得票数 2
回答已采纳
我需要一个dom-repeat循环遍历一个数组，并且对于每个项目，我还需要在相同索引位置的第二个数组的元素。
<template is="dom-repeat" items="[[my_array1]]">
<div>[[item]]</div>
<div>[[my_array2[index]]] </div> <!-- this does not work -->
</template>
如何解决？
浏览 2提问于2016-04-15得票数 0
我正试着让下面的内容发挥作用。当然，它最初呈现parentItems的内容，但在更改它时，不调用在parentItems上循环的模板。我看过notifyPath，但不确定这是否是正确的方向
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
<link rel='import' href
浏览 1提问于2015-11-04得票数 0
回答已采纳
我正在学习Polymer 1.0，我正在尝试从api中提取天气数据。一开始，我对URL进行了硬编码，我能够获得数据，因为我可以在开发控制台中看到它。现在我正在尝试做一个dom-repeat，但是我在控制台中得到一个奇怪的错误：
[dom-repeat::dom-repeat]: expected array for 'items', found Object {city: Object, cod: "200", message: 0.0058, cnt: 3, list: Array[3]} polymer.html:3923
我有一个导入webcompone
浏览 2提问于2015-11-12得票数 1
2回答
点击聚合物更新类
、、、
我有聚合物组件，它被设计成一系列标签，并建立导航标签列表。我必须成功地构建这些选项卡，但我的问题是，每当我单击一个选项卡时，我的活动类就不会移动到它。任何帮助都会很棒！
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="basic-nav">
<template>
<style>
.active{
color: red;
}
浏览 3提问于2016-01-19得票数 1
回答已采纳
我创建了一个元素来列出一组公司(listado-empresas)
这是我的密码：
<link rel="import" href="ficha-empresa.html">
<dom-module id="listado-empresas">
<template>
<style>
:host {
display: flex;
flex-wrap: wrap;
浏览 1提问于2016-11-09得票数 0
回答已采纳
2回答
我的问题是我找不到使用<content>标记绑定数据的方法。我想要创建一个表元素，其中您只传递一个标题数组和表示要使用的数据的对象数组。
显示数据的代码如下：
<template is="dom-repeat" items="{{rows}}">
<td>{{item.Id}}</td><td>{{item.Descripcion}}</td>
</template>
但是，如果使用这种方式，我的表元素只在行具有Id或Descripcion属性时才能工作。
我想做这样的事
浏览 2提问于2015-07-31得票数 1
回答已采纳
我有一个像这样简单的template
<template is="dom-repeat" items="[[items]]">
<paper-button active="{{item.selected}}" toggles raised>
<span>[[item.selected]]</span>
</paper-button>
</template>
如果我通过点击列表中的第一个paper-button，然后调用
this.set(
浏览 2提问于2015-08-27得票数 1
回答已采纳
1回答
我正在尝试用Polymer Fire检索Firebase数据。当我查看控制台时，它返回两个对象，但是数组的长度是三个。当我试图执行dom-repeat时，我成功地打印了两个填充的行，但也打印了一个空行。这怎麽可能？
浏览 13提问于2016-09-20得票数 2
回答已采纳
1回答
如果我有以下dom-repeat模板：
<template is="dom-repeat" items="{{myFiles}}" as="file">
<span>
{{file.createDate}} <br/>
</span>
</template>
我想格式化file.createDate，有什么方法可以用来完成吗？
浏览 3提问于2016-11-29得票数 2
回答已采纳
在中，当单击“显示更多”按钮时，您应该能够看到'4‘呈现。控制台记录对my-元素的模型的更改，但DOM不更新。我做错什么了？
<!DOCTYPE html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="impo
浏览 2提问于2015-09-11得票数 4
回答已采纳
因此，我试图使用<template is="dom-if">，但我只是无法使它工作。
<template is="dom-repeat" items="{{row}}" as="project">
<template is="dom-if" if="{{project == null}}">
<span>Untitled project</span>
</template>
<template
浏览 3提问于2015-09-04得票数 2
回答已采纳
试着为我的小项目摆弄聚合物框架。聚合物dom-分析对象内部的数组时出现重复错误
以下是代码调用
<paper-tabs scrollable selected={{selected}}>
<template is="dom-repeat" items="{{rooms}}">
<paper-tab>{{item.name}}</paper-tab>
</template>
</paper-tabs>
<iron-pages selected=&
浏览 3提问于2016-08-09得票数 0
回答已采纳
在过去的两天里，我一直在和一个嵌套的dom-repeat打架。
我现在多少知道了当子属性改变时如何重新渲染。
但是仍然不理解渲染函数的用途。我更改了绑定到dom-repeat的数据，并调用了渲染器，但什么也没有发生。
_renderDREmployees: function() {
this.employees[0].name="RENDERED"
// Why this doesn't work ?
this.$.drEmployees.render()
},
查看此处
有人能给我解释一下吗？
如果你能看看我的例子，看看我是不是马上就做了。当绑定到dom-
浏览 1提问于2016-11-01得票数 0
2回答
我有一个dom-repeat模板(聚合物1.2.3)，并希望它渲染元素取决于模型。
根据item中的值，模板应该呈现一个按钮、一个复选框或其他事先不知道的东西。这是我尝试过的：
<template is="dom-repeat" items=[[myItems]]>
<div>[[_render(item)]]</div>
</template>
_render函数在这里返回一个DOM元素，但这并不能正常工作(如预期的那样)。
_render: function() {
return document.create
浏览 0提问于2016-01-10得票数 0
2回答
我有一份事件清单。每个事件都有一个名称。当name输入字段为空时，它是可见的。当用户完成工作时，他们可以按“enter”键，然后隐藏输入字段并显示相应的span。如果他们想再次编辑字段，他们可以点击span来显示输入字段。
我用的是聚合物1.6下面是我正在使用的代码：
<template is="dom-repeat" items="{{referralEvents}}" index-as="index" id="referralEventsElement">
<span hidden$="{{!i
浏览 0提问于2016-09-27得票数 3
我正在尝试访问在dom-repeat模板中创建的元素，这样我就可以通过编程来修改它们。
<google-map id="map">
<template is="dom-repeat" id="markers" items="{{items}}">
<google-map-marker latitude="item.latitude" longitude="item.longitude">
</google-map-ma
浏览 1提问于2015-06-23得票数 0
在Polymer 1.2中，如何在dom-repeat中使用内容？
//component
<dom-module id="data-stream">
<template>
...
<div class="data-stream-list">
<template is="dom-repeat" items="[[stream]]">
<div class
浏览 0提问于2016-05-27得票数 1
2回答
我有一些HTML容器，如下所示
<iron-list is="dom-repeat" items="[[userList]]" as="user">
<paper-checkbox class="styled sizeCheckbox">
<div class="primary">[[user.userName]]</div>
</paper-checkbox>
</iron-list>
在我的js文件中，我正
浏览 22提问于2017-07-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
