gpt4 book ai didi

polymer - 如何更新 polymer 模型中的 hidden$= 属性?

转载 作者:行者123 更新时间:2023-12-05 00:58:25 24 4
gpt4 key购买 nike

this jsbin ,当您单击“显示更多”按钮时,您应该能够看到呈现的“4”。控制台记录对 my-element 模型的更改,但 DOM 没有更新。我做错了什么?

<!DOCTYPE html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>

<dom-module id="my-element">
<template>
<button on-click="_dosomething">show more</button>
<template is="dom-repeat" items="{{myItems}}" >
<div hidden$="{{_isItemHidden(item, shownItems)}}">{{item}}</div>
</template>
</template>
</dom-module>

<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element',
ready: function() {
this.myItems = [1,2,3,4,5];
this.shownItems = [1,2,3]
},
_dosomething: function(){
console.log(this.shownItems);
this.push('shownItems', 4);
console.log(this.shownItems);
},
_isItemHidden: function(item, shownItems) {
return !shownItems.some(function (i) {return i == item});
}
});
});
</script>

<my-element></my-element>


</body>
</html>

最佳答案

您可以通过在计算绑定(bind)中使用通配符 * 来观察数组的变化,而不是每次都创建一个新数组(从 here 中读取)。

所以你的绑定(bind)变成 -

<div hidden$="{{_isItemHidden(item, shownItems.*)}}">{{item}}</div>

而你现在的计算功能应该是——
_isItemHidden: function(item, e) {
return !e.base.some(function (i) { return i == item });
}

查看更新的 jsbin here .

关于polymer - 如何更新 polymer 模型中的 hidden$= 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32531958/

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