Unbinding a model does not remove the template contents from the page #12687
Labels
P1
A high priority bug; for example, a single project is unusable or has many test failures
Milestone
Comments
|
Issue #11983 has been merged into this issue. |
|
Added Library-MDV label. |
|
I believe this will get fixed in time for 1.0 Removed Priority-Medium label. |
|
Added this to the M7 milestone. |
|
I believe this is fixed now in version 0.8.1 (I see a blinking "Activated!" and "world"). Added Fixed label. |
|
Super awesome, thanks! |
sethladd
added
Type-Defect
P1
This issue was closed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This behavior changed recently, and polymer.dart hasn't caught up.
This works in polymer.js:
<html>
<head>
<title>Test</title>
<script src="polymer.min.js"></script>
</head>
<body>
<p>
The below will appear and disappear if the model is not null,
and will disappear if the model is null. Or, it should.
</p>
<template id="tmpl" bind>
<p>Hello {{msg}}</p>
</template>
<!-- or... -->
<p>
The below will appear and disappear if the conditional value
is true or false.
</p>
<!-- because we are binding a boolean directly as the model,
there's no further path for the {{ and }} -->
<!-- also, the bind attribute here is optional -->
<template id="tmpl2" if="{{}}">
<p>Activated!</p>
</template>
<script>
var tmpl = document.getElementById('tmpl');
var tmpl2 = document.getElementById('tmpl2');
var model = {'msg': 'world'};
setInterval(function() {
if (tmpl.model !== undefined) {
console.log('unbinding');
tmpl.model = undefined;
tmpl2.model = false;
} else {
console.log('binding');
tmpl.model = model;
tmpl2.model = true;
}
}, 1000);
</script>
</body>
</html>
Every second, the contents of #tmpl are added, then removed.
This doesn't work in polymer.dart today. Here's the code to test:
import 'dart:html';
import 'dart:async';
class Message {
String msg;
}
main() {
Message message = new Message()..msg = 'world';
TemplateElement template = query('#tmpl');
TemplateElement ifTemplate = query('#tmpl2');
new Timer.periodic(const Duration(seconds: 1), (_) {
if (template.model != null) {
template.model = null;
ifTemplate.model = false;
} else {
template.model = message;
ifTemplate.model = true;
}
});
}
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<!-- BUG: https://code.google.com/p/dart/issues/detail?id=11983 -->
<!-- Not sure why I need an if here. Why isn't bind/unbind enough? -->
<p>
The below will appear and disappear if the model is not null,
and will disappear if the model is null. Or, it should.
</p>
<template id="tmpl" bind>
<p>Hello {{msg}}</p>
</template>
<!-- or... -->
<p>
The below will appear and disappear if the conditional value
is true or false.
</p>
<!-- because we are binding a boolean directly as the model,
there's no further path for the {{ and }} -->
<!-- also, the bind attribute here is optional -->
<template id="tmpl2" if="{{}}">
<p>Activated!</p>
</template>
<script type="application/dart" src="index.dart"></script>
</body>
</html>
The text was updated successfully, but these errors were encountered: