I have a question about React Syntax.
I was conceptualising a rebuild of my website in React and was writing code to access the data-attribute value.
The method I used to get the data-attribute value was:
e.target.getAttribute('data-menuItem');
and that seemed to work just fine. Upon further investigation I read about the alternative notation for the same method looks like:
e.target.attributes.getNamedItem('data-menuItem').value
I would just like to know if the second method I mentioned is best practice or if it really matters at all.
Your help is much appreciated.
Thanks
Moe
Let suppose that you have <div data-pg="abc"></div> in your html then in react you can retrieve data attributes:
let val = e.target.dataset.pg
Now your val will have abc.
To retrieve value of data attribute, alternative way is:
let val = e.target.getAttribute('data-pg')
There is no real difference (DOM-wise) between getAttribute and attributes.getNamedItem - both exists in all modern browsers and you can use any of them.
The attributes property returns a live collection of all attribute nodes registered to the specified node, while the getAttribute function gives you direct access to the value of the attribute you wanted.
Related
In my angularjs component.ts file I have code that looks like
this.inputmy_input_name[id] = 'input-txtgray';
what this does is that it adds input-txtgray class to form element my_input_name
but the problem is there are 2 or more form elements with the same name and I need to change only one (the one next to the element that triggered the call), I suppose thats what the id is supposed to do but doesn't.
I am new to Angular and I am not sure if this is something that is standard to Angular or is this something that is in the code somewhere?
Edit: The elements are autogenerated using other code and I can't change the elements without extensively editing the rest of the code and right now I do not wish to do so.
Any help highly appreciated.
Thanks
Rather than doing this way, you can use ngClass.
Read abt it here: angular.io/api/common/NgClass
<some-element [ngClass]="{'input-txtgray': true}">
</some-element>
In the place of true, you can put a boolean variable(initially false) and trigger it true on API call
I am using VMWare Clarity datagrid with single selection.
Behind the scene, I am receiving updated data and randomly, the selected row is no more selected.
I found those links where they seemed to have the same issue and looks like it is fixed in 0.12.2, but I don't see that from side:
https://github.com/vmware/clarity/issues/484
https://github.com/vmware/clarity/issues/2342
Here my code
html
<clr-datagrid [clDgRowSelection]="true" [(clrDgSingleSelected)]="selectedUnit">
...
<clr-dg-row *clrDgItems="let unit of units" [clrDgItem]="unit" (click)="backupSelectedUnit(unit)">
...
</clr-dg-row>
</clr-datagrid>
JS
myfunc() {
this.units = this.getUpdatedUnits();
}
Thanks in advance
You are missing the trackBy on *clrDgItems. Whenever you are dealing with objects you receive from the server, you really want to make sure you are using trackBy to help Angular (and thus Clarity) know how to compare your objects. Otherwise the only comparison Angular can perform is reference equality, which isn't preserved when you keep getting updated objects from the server. Here is the official documentation for it, and you can find a maybe more readable explanation in the template syntax docs.
*clrDgItems supports the same trackBy option as *ngFor, so you can just write:
<clr-dg-row *clrDgItems="let unit of units; trackBy: trackById" ...>
where trackById is a function you add to your component that looks like this:
trackById = (index, unit) => unit.id
I'm assuming here that the objects you receive from the server have an id, but you can use any other way to identify them depending on your specific use case.
{
"$id":"-KMVCUSAsz92c0Hp296i",
"$priority":null,
"aQuestion":"what is your favorite color",
"option1":{"option":"red","vote":1},
"option2":{"option":"blue","vote":2},
"option3":{"option":"green","vote":0},
"option4":{"option":"yellow","vote":0}
}
So using dot notation to access this object from Firebase, using vm.data.$id and vm.data.$priority returns the correct value. However using vm.data.aQuestion or vm.data.option1 yields undefined. I've looked at several posts, however none have fixed this issue for me. Is there something simple I'm not understanding?
Okay, I think I may have figured it out. I was luckily able to find this post shortly after reading Surjeet's about something making my field null or empty.
Cannot access Firebase object attributes. Value displayed as undefined ANGULARFIRE
Because Firebase values are loaded asynchronously, the value did not load. after using vm.data.$loaded().then was I able to retrieve through dot notation. Not sure if this is the best way, but it works. Thanks everyone for your help.
Also, if anyone that reads this has a better way to go about this issue, please let me know. Thanks!
Try to see have you did something in your code which is making your object field null.
If not then,
Try this one vm.data['aQuestion']
please explain me in a words why it works perfect when I call
ons.slidingMenu.toggleMenu()
having at the same time myMenu as variable of
<ons-sliding-menu ....var="myMenu">
I mean I should call myMenu.toggleMenu(), not ons.slidingMenu.toggleMenu() ....
I think that ons.slidingMenu is defined deep inside onsen. Where I could read about all this hidden vars? (I've found nothing about it in onsen-ui site)
Thanks!
It's the same object, but I would advice using the one you get using the var="..." attribute.
Actually if you have a navigator you get an ons.navigator variable as well. If you have many of the same type of component it will refer to the one that was parsed most recently.
How does cakephp handle a get request? For instance, how would it handle a request like this...
http://us.mc01g.mail.yahoo.com/mc/welcome?.gx=1&.rand=9553121_pg=showFolder&fid=Inbox&order=down&tt=1732&pSize=20&.rand=425311406&.jsrand=3
Would "mc" be the controller and "welcome" be the action?
How is the rest of the information handled?
Also note that you could use named parameters as of Cake 1.2. Named parameters are in key:value order, so the url http://somesite.com/controller/action/key1:value1/key2:value2 would give a a $this->params['named'] array( 'key1' => 'value1', 'key2' => 'value2' ) from within any controller.
If you use a CNN.com style GET request (http://www.cnn.com/2009/SHOWBIZ/books/04/27/ayn.rand.atlas.shrugged/index.html), the parameters are in order of appearance (2009, SHOWBIZ, books, etc.) in the $this->params['pass'] array, indexed starting at 0.
I strongly recommend named paramters, as you can later add features by passing get params, without having to worry about the order. I believe you can also change the named parameter separation key (by default, it's ':').
So it's a slightly different paradigm than the "traditional" GET parameters (page.php?key1=value1&key2=value2). However, you could easily add some logic in the application to automatically parse traditional parameters into an array by tying into how the application parses requests.
CakePHP uses routes to determine this. By default, the routes work as you described. The remainder after the '?' is the querystring and it can be found in $this->params['url'] in the controller, parsed into an associative array.
Since I found this while searching for it, even though it's a little old.
$this->params['url']
holds GET information.
I have tested but it does work. The page in the Cakephp book for it is this link under the 'url' section. It even gives an example very similar to the one in the original question here. This also works in CakePHP 1.3 which is what I'm running.
It doesn't really use the get in the typical since.
if it was passed that long crazy string, nothing would happen. It expects data in this format: site.com/controller/action/var1/var2/var....
Can someone clarify the correct answer? It appears to me that spoulson's and SeanDowney's statements are contradicting each other?
Would someone be able to use the newest version of CakePHP and get the following url to work:
http://www.domain.com/index.php/oauth/authorize?oauth_version=1.0&oauth_nonce=c255c8fdd41bd3096e0c3bf0172b7b5a&oauth_timestamp=1249169700&oauth_consumer_key=8a001709e6552888230f88013f23d5d004a7445d0&oauth_signature_method=HMAC-SHA1&oauth_signature=0bj5O1M67vCuvpbkXsh7CqMOzD0%3D
oauth being the controller and authorize being a method AS WELL as it being able to accept the GET request at the end?