I found this in vue component , I didn't understand the purpose of :data-col in div , could you explain please
<template>
<div
class="vertical-layout h-100"
:class="[layoutClasses]"
:data-col="isNavMenuHidden ? '1-column' : null"
>
This is a combination of Vue attribute binding (also known as v-bind) and HTML data-* attribute, along with Tenary operator.
This v-bind and tenary method is a common practice in vue development, especially in conditional rendering.
The purpose of this code is to put the data-col attribute with a value of 1-column on the specified div when the isNavMenuHidden is true
this is a bind attribute and means that data-col is equal to 1-column when 'isNavMenuHidden' is true
Related
From Polymer's Anatomy of a data binding
To bind to a property, use the property name in attribute form (dash-case not camelCase), as described in Property name to attribute name mapping:
<my-element my-property="{{hostProperty}}">
To bind to an attribute instead, use the attribute name followed by $:
<a href$="{{hostProperty}}">
But in my code, <div style="background-image: [[getImage(index)]]" class="image-show"></div> works perfectly without $.
Why is this when style is a attribute and not a property(there is no style property defined in the Polymer({}) constructor). Am I working off of a side effect?
Style is a standard HTML attribute. The polymetric way to bind to a style is to use
<div style$="[[myStyle]]">
What you're doing is using a standard style tag with a data-bind to a style property.
On the page you linked, scroll down to the section labeled: Native properties that don't support property binding and you'll see the other attributes that you have to use $= with.
I was going through the Angular 2 documentation and found the following:
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
There is no explanation on the [hidden] part. Is it a HTML property, CSS or Angular? Why isn't ng-show used instead?
ng-show is a history of angular1. Before there was no hidden property (standard HTML, it is available starting from ie11) also all standard properties were covered by some similar angular directives which were doing the stuff.
This was a problem because it forced angular programmers to learn lots of directives.
Angular2 idea was to remove all unnecessary directives, and ng-show was one of them. Instead, angular2 introduced a property binding [hidden] which does the same job.
So the answer is: this is standard HTML property utilized by the angular2 property binding.
hidden is a global HTML attribute. The square brackets indicate a property binding. Therefore
[hidden]="name.valid || name.pristine"
means "apply the hidden attribute to this element if the specified control is either valid or pristine". The browser will then render it but with display: none.
You could alternatively use *ngIf to remove the element from the rendered DOM entirely, see e.g. this answer for a comparison.
It's unclear why you reference ng-show, which was part of Angular 1 and no longer exists in 2.
I am using neon-animation-pages and I want to see if an attribute is set on one of its child elements. From what I understand you can just add any attribute you want and if it is in the tag it will resolve to true if it doesn't have a value explicity set. For instance:
<neon-animation-pages id="pages">
<div awesome>This one is awesome</div>
<div>This one is not</div>
<div>This one is not</div>
</neon-animation-pages>
Above I created my own attribute called: awesome
In my code I use this:
_onIronSelect: function(){
console.log(this.$.pages.selectedItem.getAttribute('awesome'));
}
The console only spits out 'null' or ' ' depending on whether it has my awesome attribute. I can prob make it work, but I thought it was supposed to resolve to true or false, boolean?
Found this in the docs
Boolean properties are set based on the presence of the attribute: if
the attribute exists at all, the property is set to true, regardless
of the attribute value. If the attribute is absent, the property gets
its default value.
at https://www.polymer-project.org/1.0/docs/devguide/properties.html
So I assume I should be trying to get the value of the selectedItem's property > awesome. How can I do this?
There's an important difference between properties and attributes. Properties are JavaScript properties on the DOM object. Attributes basically provide a string valued key/value database that can be initialized from markup.
The Polymer docs you quoted are talking about properties. If a Polymer element has a property, awesome, listed in the properties object with a type of Boolean, it will deserialize to true or false as described.
This is a service Polymer provides because it's a common pattern for HTML elements. For example, if you set the id attribute on an HTML element, the browser automatically reflects that to the id property. But if you add a generic attribute that that element doesn't know about (like awesome), the attribute isn't reflected as a property.
If you want to test for the presence or absence of an attribute on any element (standard HTML or Polymer), use hasAttribute as #günter-zöchbauer said. According to MDN, getAttribute in all modern browsers returns null when the attribute is absent, but apparently this wasn't always true, so hasAttribute is probably safer, as well as clearer.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
Maybe you want
this.$.pages.selectedItem.hasAttribute('awesome')
Why would I use one over the other, except if I need to define the style from a function?
<div once-style="{width:50%;}"/>
once-style
<div style="width:50%;"/>
HTML Style Attribute
If i have a fixed style in an AngularJS application is there a reason to use one over the other?
I tried finding relevant information, i just found this which really didn't answer my question.
One time binding is native to Angular. Inside the curly braces prefix the expression with a double colon. For example:
{{::name}}
Can I set data-* attribute with Thymeleaf?
As I understood from Thymeleaf documentation I tried:
<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->
<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
Yes, th:attr to the rescue Thymeleaf documentation - Setting attribute values.
For your scenario, this should do the job:
<div th:attr="data-el_id=${element.getId()}">
XML rules do not allow you to set an attribute twice in a tag, so you can't have more than one th:attr in the same element.
Note: If you want more that one attribute, separate the different attributes by comma:
<div th:attr="data-id=${element.getId()},data-name=${element.getName()}">
With Thymeleaf 3.0 there is the Default Attribute Processor which can be used for any kind of custom attributes, e.g. th:data-el_id="" becomes data-el_id="", th:ng-app="" becomes ng-app="" and so on. There is no need for the beloved data attribute dialect anymore.
This solution I prefer, if I want to use json as the value, instead of:
th:attr="data-foobar='{"foo":'+${bar}+'}'"
You can use (in combination with literal substitution):
th:data-foobar='|{"foo":${bar}}|'
Update: If you don't like the th namespace, you can also use HTML5 friendly attribute and element names like data-th-data-foobar="".
If someone is interested, related template engine tests can be found here: Tests for Default Attribute Processor
Or you can use this Thymeleaf dialect https://github.com/mxab/thymeleaf-extras-data-attribute and you'll be able do
<div data:el_id="${element.getId()}">