Closed
Description
Hi,
From the Polymer dom-if docs on Data Binding Helper Elements, (btw, the <script> tags should be placed outside and after the <dom-module>)
<dom-module id="user-page">
<template>
All users will see this:
<div>{{user.name}}</div>
<template is="dom-if" if="{{user.isAdmin}}">
Only admins will see this.
<div>{{user.secretAdminStuff}}</div>
</template>
</template>
<script>
Polymer({
is: 'user-page',
properties: {
user: Object
}
});
</script>
</dom-module>I can't seem to get this to work. Consider the following,
test-pages.html
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="test-pages">
<template>
<template is="dom-if" if="{{pages.page1}}">Page ONE</template>
<template is="dom-if" if="{{pages.page2}}">Page TWO</template>
<template is="dom-if" if="{{page3}}">Page THREE</template>
</template>
</dom-module>
<script>
Polymer({
is: "test-pages",
properties: {
pages: {
type: Object,
value: function () { return {
"page1": false,
"page2": false
}; }
},
page3: {
type: Boolean,
value: false
}
}
});
</script>index.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/elements/test-pages.html">
</head>
<body class="fullbleed">
<test-pages></test-pages>
<script>
var app = {};
document.addEventListener("WebComponentsReady", function (e) {
app = document.querySelector("test-pages");
// These do not work:
app.pages.page1 = true;
app.pages.page2 = true;
// However, this works:
app.page3 = true;
});
</script>
</body>
</html>It seems that dom-if cannot be bounded to an object's boolean property? (or am I misunderstanding something?)
Thanks so much,
Jason
Metadata
Assignees
Labels
No labels