我正在尝试在dom-repeat中设置默认值。
在下面的例子中,如果图像不可用或未定义,我试图在dom repeat中显示默认图像(http://img04.deviantart.net/8465/i/2009/260/f/a/blender__texture_dummy_by_3d_asuarus.jpg)
我认为,我们不能在表达式[[item.image]]
中使用doublepipe运算符HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-custom></x-custom>
<dom-module id="x-custom">
<template>
<style>
.test{
display:inline;
float:left;
border:1px solid black;
margin:5px;
padding:5px;
text-align:center;
}
</style>
<div> Employee list: </div>
<template is="dom-repeat" items="{{employees}}">
<div class="test">
<div># [[index]]</div>
<div>First name: <span>[[item.first]]</span></div>
<div>Last name: <span>[[item.last]]</span></div>
<div><img src="[[item.image]]" width="50px"></div>
</div>
</template>
</template>
</dom-module>
JS:
class XCustom extends Polymer.Element {
static get is() { return 'x-custom'; }
static get properties() {
return {
employees: {
type: Array,
value() {
return [
{first: 'Bob', last: 'Smith',image:'https://dummyimage.com/300.png/09f/fff'},
{first: 'Adam', last: 'Gilchrist',image:'https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png'},
{first: 'Sally', last: 'Johnson'},
];
}
}
}
}
}
customElements.define(XCustom.is, XCustom);
答案 0 :(得分:0)
不,我们不能使用管道运营商。但是:
如果您刚刚找到图像的默认值(如果未找到)或为null:
<object data="[[item.image]]" type="image/png" width="50px">
<img src="http://img04.deviantart.net/8465/i/2009/260/f/a/blender__texture_dummy_by_3d_asuarus.jpg" width="50px"/>
</object>
更多信息:Inputting a default image in case the src attribute of an html <img> is not valid?
对于其他项目,您可以使用<dom-if>
:
<span>
<template is="dom-if" if="[[!item.first]]">DefaultValue
</template>
[[item.first]]
</span>
我希望这会有所帮助。