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.
Related
i am trying to render a page with two textbox and login button in react js with Asp.net MVc as follows but only image is rendering nothing else rendering.
in
index.cshtml
inside head section css rendered
and in body section react cdn and reactjs file has been added
#{
Layout = null;
}
<html>
<head>
</head>
<body>
<div class="wrapper" id="signup"></div>
<link href="Assets/Css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Assets/JS/jquery.min.js" type="text/javascript"></script>
<script src="~/Assets/JS/react.js"></script>
<script src="~/Assets/JS/react-dom.js"></script>
<script src="~/Assets/JS/remarkable.min.js"></script>
<script type="text/jsx" src="#Url.Content("~/Assets/JS/login.jsx")"></script>
</body>
<!-- Core JS Files -->
<script src="~/Assets/JS/jquery.min.js" type="text/javascript"></script>
</html>
login.jsx
class NameForm extends React.Component {
constructor(props) {
render() {
return (
<form onSubmit={this.handleSubmit}>
</form>
);
}
}
ReactDOM.render(<NameForm />,document.getElementById('signup'));
All design part mentioned but while declaring class the error
"JSX:Parser Unable to communicate with jsx parser". Error is occuring..So Any idea how to create login form in react js using asp.net mvc. would be appreciated
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
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'm trying to create a family-calendar style app that has a table with names of persons as columns and dates as rows. Not sure how to do this but this is what I have so far:
calendartable.html
<polymer-element name="calendar-table">
<template>
<table>
<tr template repeat="{{dates}}">
<td template repeat="{{people}}">{{name}}</td>
</tr>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
calendartable.dart
import 'package:polymer/polymer.dart';
class Person
{
String name;
Person(this.name);
}
#CustomTag('calendar-table')
class CalendarTable extends PolymerElement {
List people = [new Person("Kalle"), new Person("Olle")];
List dates = [new DateTime(2013, 09, 09), new DateTime(2013, 09, 10)];
}
Some questions about the above:
The above code does not work, "Uncaught Error: EvalException: variable not found: people in 193757919". Is this due to this bug or am I doing something else wrong?
Is there another way to create tables with both dynamic rows and columns? Maybe some workaround if the bug is affecting my code?
Is there any docs about using "template" as an attribute rather than an element? (Just saw some other code that used it as an attribute and it seems to work but cannot find any official docs)
UPDATE:
The output I am looking for is something like this. (I plan to add content for the "X" in the cells once I have the basic layout rendering correctly):
+------------+-------+------+
| | Kalle | Olle |
+------------+-------|------+
| 2013-09-09 | X | X |
+------------+-------+------+
| 2013-09-10 | X | X |
+------------+-------+------+
UPDATE:
This is what I ended up with that works (thanks to ianmjones for pointing me in the right direction!):
calendartable.html
<polymer-element name="calendar-table">
<template>
<table>
<tr>
<td></td>
<template repeat="{{person in people}}">
<td>{{person.name}}</td>
</template>
</tr>
<template repeat="{{date in dates}}">
<tr>
<td>{{date.toString()}}</td>
<template repeat="{{person in people}}">
<td>X</td>
</template>
</tr>
</template>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
I think this is what you want, or at least will get you closer.
<polymer-element name="calendar-table">
<template>
<table>
<template repeat="{{date in dates}}">
<tr>
<td>{{date.toString()}}</td>
<template repeat="{{person in people}}">
<td>{{person.name}}</td>
</template>
</tr>
</template>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
This should give you as many rows as there are dates, first column is date (needs some formatting), next columns contain name of each person.
e.g:
2013-09-09 00:00:00.000 Kalle Olle
2013-09-10 00:00:00.000 Kalle Olle
This answer no longer applies after the question was updated.
I am not sure how your table cells are laid out. In your implementation, for example, there is no place to output the date value.
Assuming I haven't completely misunderstood the layout you want, you could rewrite your element <template> content as follows:
<polymer-element name="calendar-table">
<template>
<table>
<tr>
<td template repeat="{{people}}">{{name}}</td>
</tr>
<tr>
<td template repeat="{{dates}}">{{}}</td>
</tr>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
That would put the 2 names in the first row, and the two dates in the second row (if that is in fact what you want).