我不知道聚合物中的术语是什么,但我想将数据从一个聚合物元素传递到它在其中使用的另一个元素。
<dom-module id="bw-boat-form">
<template>
<paper-material class="material-container" elevation="1">
<h2>{{heading}}</h2>
<form is="iron-form">
<bw-image-upload image$="{{ data.image }}" ></bw-image-upload>
</form>
</paper-material>
</template>
<script>
Polymer({
is: 'bw-boat-form',
properties: {
data: {
type: Object
},
save: {
type: Boolean
},
update: {
type: Boolean,
value: false
}
}
});
</script>
</dom-module>
图片上传元素
<dom-module is="bw-image-upload">
<template>
<iron-image class="image" preload placeholder="/images/icons/placeholder.jpg" sizing="cover"></iron-image>
<vaadin-upload
target="{{API_URL}}/images/upload"
max-files="1"
max-file-size="200000"
accept="image/*"
upload-success="uploadResponseHandler"
file-reject="errorHandler"
>
</vaadin-upload>
</template>
<script>
Polymer({
is: 'bw-image-upload',
ready: function() {
console.log(image);
},
uploadResponseHandler: function() {
},
errorHandler: function() {
}
})
</script>
</dom-module>
我想将{{data.image}}的值从第一个元素传递给第二个元素,以便我可以在需要时更改占位符的图像。我怎样才能做到这一点?
答案 0 :(得分:1)
image
中声明<bw-image-upload>
属性:<dom-module is="bw-image-upload">
...
<script>
Polymer({
is: 'bw-image-upload',
properties: {
image: String
}
});
</script>
</dom-module>
image
绑定到iron-image
&#39; placeholder
财产:<dom-module is="bw-image-upload">
<template>
<iron-image placeholder="[[image]]"></iron-image>
</template>
...
</dom-module>
<bw-image-upload>
&lt; image
属性。注意:请勿使用image$=
,因为该语法适用于native element attributes,但此处并不适用。<dom-module id="bw-boat-form">
<template>
<bw-image-upload image="{{data.image}}"></bw-image-upload>
</template>
...
</dom-module>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-image/iron-image.html">
<link rel="import" href="paper-material/paper-material.html">
</head>
<body>
<template id="app" is="dom-bind">
<bw-boat-form heading="Kitty" data={{boatData}}></bw-boat-form>
</template>
<script>
HTMLImports.whenReady(function() {
console.log('ready');
var t = document.getElementById('app');
var boatData = {};
boatData.image = 'http://placekitten.com/400/200';
t.boatData = boatData;
});
</script>
<dom-module id="bw-boat-form">
<template>
<paper-material class="material-container" elevation="1">
<h2>{{heading}}</h2>
<form is="iron-form">
<bw-image-upload image="{{ data.image }}"></bw-image-upload>
</form>
</paper-material>
</template>
<script>
Polymer({
is: 'bw-boat-form',
properties: {
data: Object
}
});
</script>
</dom-module>
<dom-module is="bw-image-upload">
<template>
<style>
iron-image {
width: 440px;
height: 200px;
}
</style>
<iron-image class="image" preload placeholder="[[image]]" sizing="cover"></iron-image>
</template>
<script>
Polymer({
is: 'bw-image-upload',
properties: {
image: String
},
ready: function() {
console.log('bw-image-upload image', this.image);
}
})
</script>
</dom-module>
</body>
&#13;