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)
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 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.
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)
For example, I have a piece of code like this:
String_test="
<template>
<label> {{count2}} SSSSSSSSSSSSSSSSSSSSSSSSS </label>
<input id="input1" type='text' value='{{count2}}'>
</template>"
and I want to assign String_test to another element, like:
DivElement span2 = new Element.tag("div");
span2.setInnerHtml(String_test);
_content.nodes.add(span2);
However, the "< template >' tag is not recognized, nothing will show up.
NOTE: My purpose is to use setInnerHtml to dynamically add contents to the webpage with data-binding still OK.
Any ideas?
Thanks!
It appears that you are including raw html in your Dart program files. This is not how Dart works. Dart has code (kept in .dart files) that is referenced to via a tag in the HTML file. This very quick tutorial will show you how to do that: https://www.dartlang.org/docs/tutorials/connect-dart-html/
Templating is found in the Dart Polymer library. It is too long of a process to go into here but you can find a short tutorial at: https://www.dartlang.org/docs/tutorials/polymer-intro/
I would also mention that Angular comes in a Dart flavor and I find it more accessible than the Polymer libraries. The tutorials and documentation are also much better. Angular is a more comprehensive suite of libraries and it's tutorials can be found here: https://github.com/angular/angular.dart.tutorial/wiki
I wish to create an MVC wrapper around jqPlot.
I want to have a helper object to render the required html container element and the required java scripts to draw the chart.
Something that will look like this:
#Html.jqPlot()
.ChartType(eChartTypes.PieChart)
.ChartData(someData)
.RenderChart();
Now I'm only at the initial design phase and I know what the jqPlot object should look like to achieve that, the problem I'm having is with the java script that suppose to be emitted to draw the actual chart using jqPlot.
Suppose I will render the following script in my .RenderChart() method
public string RenderChart()
{
string chartCode = string.format(#"
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
$(document).ready(function(){
var plot1 = $.jqplot ('{0}', [{1}]);
});
",this.ChartGuid, this.ChartData);
return chartCode;
}
The above is not actual code but just a general representation of the idea.
So the problem is that i don't want the Helper to emit the JS code into the body of the Html document, furthermore i cannot let it do that becuse some of the required scripts may be at the bottom of the html (as the best practice states).
Any suggestions ?
What would be the best way to emit JS code using an HTML helper if the situation requires it (like this one) ?
I think, listening to an even will be a possible solution, in this case the even of outputting or finishing the rendering of the footer. so maybe your code will give as an option to listen to an event and render at that moment, but this is of course platform dependent. I also worked on a php wrapper you can fork it here: https://github.com/oumsofiane1/jqplotPHPwrapper.git
and just implemented a helper, but of course you can extend that :-)
Hope this helps