Repeat over contents, polymer dart - dart

I want to loop over all children of a custom polymer element - for instance, to place each child in a new div.
<template repeat="{{child in children}}">
<div>
{{child}}
</div>
</template>
When I try this, I get the toString() version of child, rather than the element itself. Is there a way to reference the element itself inside the repeat, rather than the result of its toString() method?

Update
A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html
This is not supported. Moustache binding can't insert HTML.
What you can do though is to use a Polymer element that provides that feature.
Please have look at my answer to HTML Tags Within Internationalized Strings In Polymer.dart <safe-html>.
With this element your code would look like:
<template repeat="{{child in children}}">
<div>
<safe-html model="{{child}}"></safe-html>
</div>
</template>
You might need to customize the NodeValidator construction which defines what kind of Elements are allowed to be added.
This feature might pose security risks (XSS) and is therefore not included in Polymer by default.

Related

Polymer 1.0 body elements in Grails GSP

I see examples using this:
<body fullbleed unresolved>
and also this
<body class="fullbleed unresolved">
Are these lines equivalent?
Because in Grails using the first method causes the exception:
Caused by
[views/layouts/main3.gsp:15] Expecting '=' after attribute name (fullbleed unresolved).
That looks like a Grails issue. It probably only supports official/known boolean attributes (attributes without values) on DOM elements but not on custom elements.
AFAIK in Polymer 0.5 mostly attributes were used but Polymer 1.x tends towards classes. I don't know if the attribute selectors are still supported.
iron-flex-layout only supports fullbleed classes (see https://github.com/PolymerElements/iron-flex-layout/search?utf8=%E2%9C%93&q=fullbleed)

Dart: Prevent polymer transformer from changing my hrefs

I have a polymer component with an HTML file which contains an anchor element <a href="foo">. This component is then imported with HTML import. The polymer transformer (or maybe the web_components transformer) will inline this import, and when doing so it will rewrite my anchor element to <a href=/path/where/the/html/file/exists/foo">.
Now I want to use the anchor tag to do client-side routing. I have a route set up as "foo" but when the transformer has rewritten the href that route will not work. So what I want is for the transformer to leave my href alone and just keep the original path. I tried using _href but that gives an error that it should only be used with bindings. So I guess my question is if there is any way to instruct the transformer to leave my hrefs alone?
This might work:
<a _href="{{'foo'}}">

Extending TemplateElement

I am not using Polymer and I am trying to extend the TemplateElement
class ItemTemplate extends TemplateElement{
ItemTemplate.created():super.created();
}
and then register it
document.registerElement('item-template', ItemTemplate,extendsTag:'template');
but when i add the following to my html test page
<template>
template
</template>
<item-template>
item-template
</item-template>
in Chromium it outputs
item-template
which means the new element that extends TemplateElement is active and not acting as a template, any idea why?
E:this is not a duplicate i said i am not using polymer and there is no polymer in the tags and its specifically about the behavior of the html5 TemplateElement
I have no experience with extending elements without Polymer but I'm pretty sure you still need the `is="xx-yy" attribute like
<template is="item-template">
item-template
</template is="item-template">
when you're extending a DOM element.
Maybe there are other measurements necessary to make it work but this should at least bring you a step closer (maybe an error message about what's still missing)

Is it possible to render a List<Element> in Polymer.dart?

Given a List<Element> elements, is it possible to render the elements in the template, like this?
<template repeat="{{element in elements}}">
{{element.SOMETHING}}
</template>
I'd want it to observe the list too, so that it would add and remove elements as the list changes.
Update
A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html
{{}} can't include HTML.
You can use something like the <safe-html> tag (see answer to HTML Tags Within Internationalized Strings In Polymer.dart)
<template repeat="{{element in elements}}">
<safe-html model="{{element.SOMETHING}}"></safe-html>
</template>
but I guess you have to change the <self-html> implementation so that it replaces itself with the content of model instead of adding model to it's content, because ul/ol can't contain <self-html>

In Dart is there any alternative way available for communication between <polymer-element> and main()?

In dart I have to make the customized element communicate with main() function. As pointed out by an example in Dart-polymer-example (https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/custom_element_with_custom_attribute_binding/index.html), currently the binding dose not work.
<template id="tmpl" bind>
<my-element value="{{value}}" id="test"></my-element>
<!-- This should be updating, but it's not updating -->
<!-- See http://code.google.com/p/dart/issues/detail?id=12440 -->
<p>The model's value is {{value}}</p>
</template>
I tried several alternative manners, like "query("#test").attributes["value"]", they do not work. Is there any other method to try?
Thanks!
Yes, I had a very similar problem! You can query the DOM and then get the xtag attribute to get the underlying Polymer object. So the example would be:
query("#test").xtag.value
See the documentation for more details:
https://www.dartlang.org/articles/web-ui/spec.html#retrieval

Resources