How can I bind a text which contains url as html. Is it possible by using the following code ?
#CustomTag('my-element')
class MyElement extends PolymerElement {
#observable String text = "Bla bla bla 'link';"
MyElement.created() : super.created();
}
<polymer-element name="my-element">
<meta charset="utf-8">
<template>
<p>
{{text}}
</p>
</template>
<script type="application/dart" src="my_element.dart"></script>
</polymer-element>
Update
A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html
No you can't bind html using mustache.
what you can do is
link
with a field like
#observable String text = "mysite.com";
or use something like a <safe-html> tag - see HTML Tags Within Internationalized Strings In Polymer.dart
Related
i need to change the color of a particular word on textarea tag or another tag that it could get number of rows like textarea or code tag whenever there is onkeyup event.
<textarea id="mainTextarea" onkeyup="changeColor()">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><title>
</head>
<body>
</body>
</html>
</textarea>
js function
function changeColor() {
document.getElementById('mainTextarea').innerHTML.replace('head', '<span style="color:red">head</span>');;
}
Going back to my question Query elements inside <content> of a custom element
Now I would like to programmatically change the template of the nested custom element before start of rendering. Is it possible?
<polymer-element name="my-element">
<template>
<div>
<template id="tml" repeat="{{items}}">
Hi, {{}}!
</template>
</div>
</template>
<script type="application/dart" src="my_element.dart"></script>
</polymer-element>
<polymer-element name="my-decorator">
<template>
<div>
<div>Decorator</div>
<content>
<!-- my-element will be here-->
</content>
</div>
</template>
<script type="application/dart" src="my_decorator.dart"></script>
</polymer-element>
in index.html:
<my-decorator>
<my-element></my-element>
</my-decorator>
in my_decorator.dart:
#override
void enteredView() {
super.enteredView();
ContentElement content = shadowRoot.querySelector('content');
MyElement elm = content.getDistributedNodes().firstWhere((e) => e is MyElement);
TemplateElement elm = elm.shadowRoot.querySelector("#tml");
// TODO
// change template here!
}
Why would you change the template?
In attached() after super.attached() the element is already rendered.
You can access the template with this.templateInstance
and try to change it before super.attached() (or in the constructor or in polymerCreated).
I haven't done this myself yet.
It's no problem to change the rendered element.
If you want to avoid that the this change is visible, you can set a (CSS) class initially which is defined to render the element invisible and after you are done with your changes, remove this class.
I’ll do some work after a conditional template is instantiated.
Like this:
<polymer-element name="xyz-test">
<template>
<template if="{{xyz}}">
<div class="main">
<div class="sub1"> </div>
<div class="sub2"> </div>
</div>
</template>
</template>
<script type="application/dart" src="my_test.dart"></script>
</polymer-element>
.
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('xyz-test"')
class XyzText extends PolymerElement {
// After the Conditional Templates are created,
// I wish to work with the Elements in them.
DocumentFragment instanceTemplate(Element template) {
// Is not working for Conditional Templates
}
#override
Node shadowFromTemplate(Element template) {
// Is not working for Conditional Templates
}
}
Perhaps somebody can give me any Idea.
Thank you very much in advance.
You should be able to call a method (or getter) on your XyzTest class.
class="{{getClass()}}"
I am trying to iterate a list to create a select drop-down box. My code is shown below as a web component
<!DOCTYPE html>
<polymer-element name="epimss-name">
<template>
<label for='titleCmbo' id='titleLbl'>Title</label>
<template repeat="{{title in titleList}}">
<select id='titleCmbo'>
<option value='{{title}}'>{{title}}</option>
</select>
</template>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
#CustomTag( 'epimss-name' )
class NameElement extends PolymerElement
{
final List<String> titleList = toObservable([ '', 'Dr', 'Miss', 'Mr', 'Mrs', 'Prof' ]);
}
</script> </polymer-element>
</body>
</html>
As the code is, it creates a separate combo for each iteration.
If I move the tags outside of the nested template, the editor complains.
What is the proper way to do this?
Thanks
You can use the template attribute on the option tag. It will repeat the option element and loop value for each item in the template collection.
<select id="titleCmbo">
<option value="{{title}}" template repeat="{{title in titleList}}">
{{title}}
</option>
</select>
I use tablesorter in combination with jquerycsvtotable.
Everything works fine, but... there's a lag between the moment when the table is loaded and the moment when tablesorter is shown that makes the data appear without any formatting on the screen. The time varies on the amount of data, between 2 and say 5 seconds.
Is there any way to show a "loading" gif or just nothing untill all the process is completed to avoid showing ugly data?
Thanks!
PS: I don't mean the time tablesorter takes to re-order rows when you click on a certain header cell, which I know is already arranged with optional processing gifs shown into the header...
EDIT: please find below my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
.bind("loadComplete",function(){
var footer = mytable.find('tr:last');
mytable
.find('thead').after( footer.wrap('<tfoot/>').parent() ).end()
.tablesorter({
sortList: [[5,0]],
widthFixed : true,
widgets: ["zebra", "filter", "stickyHeaders"],
widgetOptions: {filter_hideFilters : true}
});
});
});
</script>
</head>
<body>
<p>
<a href=../../>Home</a> <a href=../>30</a> <a href=./>0000</a><br>
2013-04-15 12:45:17
</p>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
I wonder if the solution is as easy as just adding the "tablesorter" class name to the table. If you are using a theme other than default, that theme name should also be included:
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
tableClass: 'tablesorter tablesorter-default', // adjust theme name here
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})