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>
Related
I'm trying to make input for tags using jQuery Select2.
It works well by adding {tags: true} option to Select2, allowing user to add custom tags. But I don't want the dropdown to be displayed, so I added CSS:
.select2-dropdown--below {
display: none;
}
Turns out, it still have unwanted behaviour when I enter new tag and press enter:
If I enter a new keyword, it inserted successfully
If I enter a keyword that is a substring from one of pre-selected options -- like "raw" or "berry" that already contained by "Strawberry" -- it won't insert
I think this is caused by Select2 behaviour that automatically highlights / select option that matches input string
How can I fix this? Or is there any way to properly remove Select2 dropdown?
Here is the full snippet:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
.select2-dropdown--below {
display: none;
}
</style>
</head>
<body>
<select multiple style="width: 100%">
<option selected>Banana</option>
<option selected>Orange</option>
<option selected>Strawberry</option>
</select>
<script>
$(document).ready(function () {
$('select').select2({
tags: true,
width: 'resolve'
});
});
</script>
</body>
</html>
Found the solution, I added a matcher to the option that always return null so it will not match and highlight any of pre-selected options
$('select').select2({
tags: true,
width: 'resolve',
matcher: function () { return null; }
});
I want to show a prepopulated form in jsp.
TestAction.java
import com.opensymphony.xwork2.ActionSupport;
public class TestAction extends ActionSupport {
private String firstName;
private String lastName;
public String execute(){
setFirstName("John");
setLastName("Doe");
return SUCCESS;
}
/** Getters & Setters **/
}
When I use html tags, it fails to do so,
Test.jsp
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
First Name <input type="text" name="firstName" > <br/>
Last Name <input type="text" name="lastName">
</form>
</body>
</html>
when instead I use struts2 tags, It works fine.
<s:form>
<s:textfield name="firstName"></s:textfield>
<s:textfield name="lastName"></s:textfield>
</s:form>
Can this be achieved using non struts2 tags ?
You can use JSP EL
<form>
First Name <input type="text" name="firstName" value="${fn:escapeXml(firstName)}"><br/>
Last Name <input type="text" name="lastName" value="${fn:escapeXml(lastName)}">
</form>
The values are strings, so better to escape them for safety.
If this jsp returned as a result of the action the variables along with standard scopes also searched the value stack. The action properties should be available from the value stack.
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
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()}}"