In Polymer.js, I can do this:
<polymer-element name="test-element" attributes="word" noscript>
<template>Foo {{word}} <content></content></template>
</polymer-element>
<test-element word="bar">baz</test-element>
And the output is Foo bar baz. See http://jsfiddle.net/vV3yS/.
However, if I do the same in Polymer.dart, I just get Foo baz. Worse, if I add lightdom, it works in Polymer.js, but Polymer.dart gives bazFoo.
Can I make Polymer.dart behave the same as Polymer.js does? I'm using 0.9.5.
That is interesting because lightdom was already removed from Polymer.js a while ago (https://github.com/Polymer/docs/issues/243)
It's a while since I used noscript myself but my experience was that it has issues in PolymerDart especially when you extend other elements.
I guess your element would work if you add a script to your element with a field
#published var word;
The link to the issue you created for this problem:
https://code.google.com/p/dart/issues/detail?id=17426
EDIT
polymer-element with attributes but without a script (with noscript) wasn't supported previous to Polymer 0.10.0 but should be supported with the next release (https://code.google.com/p/dart/issues/detail?id=17426)
Related
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)
I'm developing a software in which all the select elements are using the select2 library.
In the footer there is this code to do that:
$('select').select2();
Now I'm developing a new screen that some selects will use select2 and others don't so I created the class ".noSelect2" for the ones that aren't supposed to have select2.
When I put this code, it only destroys the first select:
$('.noSelect2').select2('destroy')
What can I do to destroy all the elements?
The problem with using a class to target something with Select2 is that Select2, in the past, copied classes to the container elements so you could apply CSS there. As a result, using the class to target the <select> also resulted in targeting the <div> or other container element, and that would trigger an error.
The easy solution is to add select in front of your class selector, so it only targets the <select> elements.
$('select.noSelect2').select2('destroy')
In 4.0.0 there is a known bug with calling select2('anything') in that it isn't consistent when selecting multiple instances. This should be fixed by the next release (4.0.1) of Select2.
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)
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.
Code for a very small app illustrating these multiple constructor calls is now up on GitHub at https://github.com/Chiba-City/testnest.
I am trying to figure out
why a polymer element would be constructed twice and
what determines the order of construction of polymer elements that contain other polymer elements and
why is a "templated out" element using an "if" template constructed at all.
Also, if one cannot reproduce these results with three simple polymer elements, one defined to contain or nest the other two, I would also love to know that as well.
I am finding duplicate constructor calls and constructor ordering peculiarities. Here is an explanation of the occurrence of these peculiarities.
I have a very simple "app". There is an index.html file that html-includes a file of custom element definitions and declares just one custom polymer-dart element in its body. Here are the relevant portions of the index.html file. I have elided the customary boiler plate.
<!-- index.html -->
<!-- in head -->
<link rel="import" href="icapp.html">
<!-- boiler plate polymer/init.dart and ../dart.js stuff here -->
<!-- only contents of body tag -->
<icount-app></icount-app>
Now in "icapp.html" I define two elements consisting only of h3 labels. I contain these two elements in the template for a third element which begins with a simple H1 label. Here is the code for all three elements.
<!-- icapp.html -->
<!-- User stats list -->
<polymer-element name="icount-statlist" >
<template><h3>My Stats</h3></template>
</polymer-element>
<!-- Find stats -->
<polymer-element name="icount-findstats" >
<template><h3>Find New Stats</h3></template>
</polymer-element>
<!-- This is the element that contains the other two elements in its template -->
<polymer-element name="icount-app">
<template>
<h1>icount.us</h1> <!-- a simple h1 heading -->
<!-- Included always -->
<icount-findstats></icount-findstats>
<!-- Included conditionally - but can never be true -->
<template if="{{false}}">
<icount-statlist ></icount-statlist>
</template>
<!-- End icount-app template -->
</template>
<!-- The code with the element definitions -->
<script type="application/dart" src="icapp.dart"></script>
</polymer-element>
I have put "print" statements in the ".created() : super.created" constructors as well as overriden "enteredView()" methods to determine the order and frequency of these calls. Here is the output during execution. I have added notes prefixed with "--"
-- note this is first, although conditional on {{false}}
IcountStatlist: created
-- now the containing element is constructed
IcountApp: created
-- notice that enteredView happens before the nested element
IcountApp: enteredView
-- notice that this element is constructed twice
IcountFindstats: created
IcountFindstats: created
IcountFindstats: enteredView
The output of the application is as expected (H1 and an H3 tags, the latter for the non-conditionally included "icount-findstats" element). But how it arrives here is peculiar, and in ways that would seem to defy adding reasonable program logic to these tags (properties, event handlers and so on).
The visible nested element is constructed twice
The "templated out" nested element is constructed once
The visible nested element's "enteredView" method is called (not surprisingly).
Above the contained visible element is constructed after the containing element. But simple experimentation shows that this ordering seems arbitrary, or at least, not dependent on templating or ordering of nested elements.
If we simply switch our preference for which nested element we "template out" we get the following output instead.
IcountStatlist: created
IcountStatlist: created
IcountStatlist: enteredView
IcountApp: created
IcountApp: enteredView
IcountFindstats: created
Here we can note:
The visible nested element, this time icount-statlist, is constructed twice, as above, but created before the containing element. Also the HTML output h3 tag occurs only once.
This visible nested element's "enteredView" method is called prior to the containing element.
The "templated out" nested element is again created (just once), but now after the containing element.
Further experimentation shows that the same element non-conditionally, visibly nested twice results in 4 constructor calls (for that element).
Another experiment shows that the same element conditionally contained twice results in 2 constructor calls (for that element).
Experimenting with reordering the "templated out" element and the visible element reveals no change in log output, i.e., the order or frequency of constructor calls.
Needless to say, I am perplexed.
Why is the visible nested element constructed twice ?
Why is the "templated out" nested element constructed at all ?
Why is one nested element constructed before the containing element and the other after ?
Why is the containing element, icount-app, itself not constructed twice?
How can a containing element sensibly set properties of contained elements given nature and ordering of custom polymer element (object) construction?
Any help greatly appreciated.
NOTE
enteredView was changed to attached
leftView to detached
-------
I tried your code and I can't reproduce the things you mentioned.
This is the output I got when I run your app:
nest-a: created
nest-a: enterView
nest-container: created
nest-container: enteredView
nest-b: created
nest-b: enteredView
the nested nest-b is not instantiated at all (the output is from the nest-b outside the <template if="{{false}}">
after changing false to true I get
nest-a: created
nest-a: enterView
nest-container: created
nest-container: enteredView
nest-b: created
nest-b: enteredView
nest-b: created
nest-b: enteredView
You need to put the value in quotes ="{{false}}" instead of ={{false}}
It worked as expected anyway because this was evaluated to false as well but would fail for all other values/expressions
I don't know if the construction order is settled.
Recently there was still a discussion whether it should be constucted inside out or document order.
If you use binding this normally isn't an issue
Can you please post the output you got from the app you published to the GitHub repo?
This problem occurred in the following stable release of Dart Editor.
$ dart --version
Dart VM version: 1.2.0 (Tue Feb 25 07:34:09 2014) on "linux_x64"
Installation of the latest dev channel build of Dart SDK made the multiple constructor calls go away.
$ dart --version
Dart VM version: 1.3.0-dev.6.1 (Sat Mar 22 02:14:22 2014) on "linux_x64"
The output of the testnest project is now:
nest-a: created
nest-a: enterView
nest-container: created
nest-container: enteredView
nest-b: created
nest-b: enteredView
How to code around the order of nested element construction - both before and after the containing element - in Dart code remains an open exercise for the reader :)