(First hours with AngularDart...)
The question's in the title. I have included:
import 'package:html/src/query_selector.dart';
and my function is:
void clickRadio() {
var ele=querySelector(node,'#idjoe1');
}
What do I use for node?
Thanks
Steve
dart comes with dart:html package with a nice query selector
import 'dart:html';
var ele = querySelector('#idjoe1');
<div id="idjoe1"></div>
but with angular2 you can use the ViewChild annotation inside you component
https://webdev.dartlang.org/angular/api/angular2.core/ViewChild-class
EDIT:
you also need this syntax if you want to use an other Angular2 component
#ViewChild('idjoe1')
MaterialRadioComponent radioComponent;
#ViewChild('idjoe2')
ElementRef ref;
HtmlElement get element => ref.nativeElement;
<material-radio #idjoe1></div>
<div #idjoe2></div>
In recent versions you can either inject an Element or HtmlElement in the constructor (which I think gives you the host element):
HtmlElement _host;
MyComponent(this._host);
Or you can use #ViewChild with an Element or HtmlElement:
#ViewChild('foo')
HtmlElement _foo;
...
<div #foo>
Related
From the Rescript Documentation, it is suggested spread can be used to enable passing a pre-existing list to a component. I am confused what exactly MyComponentis in Rescript as I cannot find a way to initialise a component, which can be done with a function in vanilla React.
<MyComponent>...myChild</MyComponent>
where myChild = list{child1,child2}
After several attempts, the followings do not work:
#JSX div(~children=myChild) , because Rescript asks for wrapping it in a list as in list{myChild}
#JSX div(~children=list{myChild}), which gives a type error
Initialising a module named MyComponent, and do <MyComponent> ...myChild </MyComponent>, but this gives the error The value make can't be found in MyComponent
Initialising a function with a capitalisation escape: let \"MyComponent" = () => ..., but this gives the error The module or file MyComponent can't be found.
What I would love is an example of the initialization of the component MyComponent which can be used as a capitalised tag like <MyComponent>...myChild</MyComponent>. Thank you in advance.
module MyComponent = {
#react.component
let make = (~children: list<React.element>) => {
<div> {Belt.List.toArray(children)->React.array} </div>
}
}
From Rescript Forum.
How can i access a string array coming from a model class using sightly(HTL)
The TestModel is a model class that returns a string array , getResult() is the getter used to return the string array
how can I use sightly to get it??
<p>display output :</p>
<sly data-sly-use.object = "com.silversea.core.models.TestModel">
<sly data-sly-list.mylist = "${object.Result}"> //what command show we use instead of data-sly-list
<p>1st text: ${item} </p>
</sly>
</sly>
The problem you are facing here is caused by two things:
Defining an identifier on the data-sly-list statement allows you to rename the itemList and item variables. item will become variable and itemList will become variableList
More details in https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html
So in your example you must change ${item} into ${mylist}
<p>display output :</p>
<sly data-sly-use.object = "com.silversea.core.models.TestModel">
<sly data-sly-list.mylist = "${object.result}"> //what command show we use instead of data-sly-list
<p>1st text: ${mylist} </p>
</sly>
</sly>
The second thing is that you should also follow the java bean naming convention: So if you have a getter getResult() then in HTL you should use ${object.result} (starting from lowercase)
I'm trying to render ag-grid with a fullWidth template, that is actually a directive.
gridOptions: {
fullWidthCellRenderer: function(node) {
var el = angular.element('<div />');
el[0].innerHTML = '<div directive="node.data"></div>';
var tpl = $compile(el)($scope);
return tpl[0];
}
The directive expects a model (from 'directive' attribute) but gets undefined.
I'm guessing there are scope issues here, and I do not want to stringify my data in the html template.
How can I pass the data object into my directive?
Thank you
I managed to solve this in 2 ways:
first is to create a child scope from $scope with `$scope.$new()', assign the node variable to it, and compile to template with it.
second, probably better, is to return the element with no $compile and use
angularCompileRows: true in gridOptions.
In my Find controller I have a method like:
public Result findLatest(String repoStr) {
............
}
Which is linked through a route:
GET /latest controllers.Find.findLatest(repo: String)
Then, I have a form in a view like:
<form action="#routes.Find.findLatest()" method="get">
....
<select name="repo">....</select>
</form>
But obviously that is failing, because it is expecting some parameters that I do not fulfill in the action. What is the correct way to do this without having to end up leaving the findLatest method taking no parameters in my controller?
You could change the routes to accept an empty string:
GET /latest/:repo controllers.Find.findLatest(repo: String = "")
Then configure your controller function to handle empty string.
That way,
<form action="#routes.Find.findLatest()" method="get">
....
<select name="repo">....</select>
will evaluate repo as an empty string at the controller level.
Edit: Support for this implementation was dropped in Play v 2.1
You may be interested in Play's Optional parameters e.g. play.libs.F.Option[String]
Example: How to handle optional query parameters in Play framework
GET /latest/:repo/:artifact controllers.Find.findLatestArtifact(repo: play.libs.F.Option[String], artifact: play.libs.F.Option[String])
This will allow you flexibility in which arguments need to be provided.
Not sure which language you're using but the link above contains an example for scala and the method declaration in java would look something like:
import play.libs.F.Option;
public static Result findLatestArtifact(Option<String> repo, Option<String> artifact){ ... }
and updated implementation 2.1
Routes with optional parameter - Play 2.1 Scala
EDIT: play 2.1+ Support : Props to #RobertUdah below
Initializing to null:
GET /latest/ controllers.Find.findLatest(repo: String = null)
GET /latest/:repo controllers.Find.findLatest(repo: String)
<form action="#routes.Find.findLatest()" method="get">
Normally all form data go in the body and you can retrieve them in your action method with bindFromRequest() (see docs).
If you really want to pass one form element as a part of the URL then you have to dynamically compose your URL in JavaScript and change your route.
Your route could look like:
GET /latest/:repo controllers.Find.findLatest(repo: String)
And the JavaScript part like (I didn't actually test the code):
<form name="myform" action="javascript:composeUrl();" method="get">
....
<select name="repo">....</select>
</form>
<script>
function submitform() {
var formElement = document.getElementsByName("myform");
var repo = formElement.options[e.selectedIndex].text;
formElement.action = "/lastest/" + repo;
formElement.submit();
}
</script>
Cavice suggested something close to what I consider the best solution for this (since F.Option are not supported anymore with the default binders in Play 2.1 ).
I ended up leaving the route like:
GET /latest controllers.Find.findLatest(repo=null)
and the view like:
<form action="#routes.Find.findLatest(null)" method="get">
<select name="repo"> .... </select>
....
</form>
and in the controller:
public Result findLatest(String repoStr) {
if(repoStr==null) {
repoStr=Form.form().bindFromRequest().get("repo");
.....
This allows me to have a second route like:
GET /latest/:repo controllers.Find.findLatest(repo: String)
I m trying to find element using xpath for tag
<nav id="nav">... </nav>
this works:
WebElement navigationPane = firefox.findElement(By.className("nav"));
but this does not:
WebElement navigationPane =
firefox.findElement(By.xpath("//nav[#id='nav')]"));
How do I make it valid expression in xpath?
In the xpath expression, you've meant to use #class instead of #id. And, there is an extra parenthesis inside. Here is the fixed version:
//nav[#class = 'nav']
After finding an HTML block in your question (made it visible with an edit), I've realized that there is an id attribute set on the element, not class. In this case, you should use the following expression:
//nav[#id = 'nav']
Note that by.id would be an easier and faster way to find the element:
WebElement navigationPane = firefox.findElement(By.id("nav"));