0
我一直在玩弄聚合物1.0了一下,有這個基本的HTML文件:只有第一個本地的DOM元素
<head>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
</script>
</head>
<body>
<dom-module id="photo-view">
<template>
<p>Photo <span>{{basePic}}</span> goes here with filters
[<span>{{filters}}</span>]</p>
</template>
<script>
var PhotoView = Polymer({
is: 'photo-view',
properties: {
basePic: String,
filters: { type: Array, value: function() { return []; } }
}
});
</script>
</dom-module>
<dom-module id="photo-open">
<template>
<button>Click me to open a photo!</button>
</template>
<script>
var PhotoOpen = Polymer({
is: 'photo-open',
properties: {
picture: { type: String, notify: true }
}
});
</script>
</dom-module>
<dom-module id="photo-editor">
<template>
<photo-view base-pic="{{picture}}"/>
<photo-open picture="{{picture}}"/>
</template>
<script>
var PhotoEditor = Polymer({
is: 'photo-editor',
properties: {
picture: { type: String, value: 'xyz.jpg' }
}
});
</script>
</dom-module>
<photo-editor/>
</body>
現在,我希望這表明的話Photo xyz.jpg goes here with filters []
,其次是該按鈕說Click me to open a photo!
。唯一的問題是,只有photo-editor
中的第一個本地DOM元素顯示!例如,現在只有photo-view
部分顯示。如果我把上面的photo-open
像photo-view
:
<dom-module id="photo-editor">
<template>
<!-- Swapped order here -->
<photo-open picture="{{picture}}"/>
<photo-view base-pic="{{picture}}"/>
</template>
<script>
...
那麼只有按鈕顯示,而不是文字。我究竟做錯了什麼?我一直在查看文檔,我看不到任何明顯的問題。 Chrome開發工具也沒有錯誤。
它與標準的關閉標籤一起工作嗎?即 ? –