I've been learning Angular and now I'm trying to understand a large piece of code that was given me, and it has a lot of $() in the code containing a variable inside and a method call $(variable_name).method() or even a CSS class inside, between double quotes $(".class_name").method().
I understand $scope well, but I get confused with the syntax I explained above. Can someone explain what is it? Thanks in advance. /Teo
P.S.: The code is a directive, so I assume JS don't have this syntax except for the Angular framework.
Angular uses a subset of jQuery called jqLite. Here you can read a documentation: https://docs.angularjs.org/api/ng/function/angular.element Using $() function is basically wrapping an element so you can call jqLite function on it an chaining them. In your particular example $(variable_name).method() will wrap a DOM node stored in variable variable_name with jqLite and then run method on it. $(".class_name").method() is another usage of $(). It works the same as querySelectorAll() but instead of collection of DOM nodes will return collection of jqLite wraped nodes and then do the same - run method on each of them.
Related
I'm working on a website where I want to add the settings of my Slick Slider trough the data-attribute. This is possible with the 'data-slick' attribute. The format for this looks like this: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.
In my WordPress CMS I'm using the plugin 'Data Attributes' to add data attributes to a Gutenberg Block. Trough this plugin all double and single quotes are converted to and therefor changes on the frontend to data-slick="{"slidesToShow": 4, "slidesToScroll": 4}"
This is not working. The Slick Slider doesn't use these settings.
Is there another way to add a JSON object into a data-attribute so it will work with the Slick Slider?
Thanks already for your help!
Kind Regards,
Nick
I think storing a JSON value in HTML is a bad idea. There are too many conditions which you have to take into consideration - backend returning page, WEB server encoding (it can add a custom encoding header), and browser compatibility. For this task, I'd prefer 2 ways: bitwise mask or simple function-for example, define a few data attributes -data-s1, data-s2, data-sn. In the JS code, add an array [ data-s1, data-s2, data-sn]. And finally, add a loop with an in-condition (if data.contains(element of array) - read and then parse the data inside of the attribute). I never worked with wordpress but for JS it is a easy task. If you need example write comment below. I can update my answer
What is the minimum example, if any, using the Polymer PWA (https://polymer.github.io/pwa-starter-kit/), to show correctly a vaadin-grid?
I tried many different combinations, but never a working one, with, often, this warning:
property-accessors.js:275 Polymer::Attributes: couldn't decode Array as JSON
Am I doing anything totally wrong?
Thanks
Andrea
Starting from the v5.2.0-beta1 we recommend using following Grid features:
column helper elements (vaadin-grid-filter-column, vaadin-grid-sort-column)
column convenience properties (path, header and text-align)
renderers for more complex cases where you previously used templates
See the example here: https://glitch.com/edit/#!/lying-blanket?path=app.js:29:42
https://lying-blanket.glitch.me/
Note: I'm using fetch API here for simplicity only, you can use XHR if necessary.
I'm working on a Play application and need to generate links in a mixed Scala-HTML view that call controller actions. I found this question from a couple years ago that's similar to my situation, but the provided answers don't work for me.
The elements are generated in a loop so I can't manually insert the argument to the controller action, but nothing I've tried has worked. This is the line I have now:
ID: #{var fhirID = <processing for ID>; <a href='#routes.Users.fhirUserDetails(fhirID)'>fhirID</a>}
The accepted answer to the question I linked earlier effectively uses this structure too:
<a href='#routes.Application.show("some")'>My link with some string</a>
My issue here is twofold:
1) How can I have the variable fhirID passed to the controller action? My generated link simply has the text "fhirID" instead of what's generated by the first part of the statement.
2) Is the #routes.Users syntax correct? When I click the generated link, it literally attempts to render a page at /myapp/#routes.Users.fhirUserDetails(fhirID)
I realize I'm probably missing something very basic here- thanks for any advice!
The problem seems to be not the #routes syntax (which you have completely correct) but rather a case of the Twirl engine not seeing where code ends and HTML begins (or something like that anyway...)
The line you've included, which has both a var and a semicolon, made me suspect this, and I've been able to reproduce the problem when I use that style.
My recommendation is to use the #defining helper rather than var to get a scoped variable for use in your links, as follows:
ID: #defining(<processing for ID>) { fhirID =>
<a href='#routes.Users.fhirUserDetails(fhirID)'>fhirID</a>
}
You can nest #defining blocks as deeply as you like if necessary, although it's probably better to make a call out to a reusable block if there's a lot of logic. I think this style makes for more-readable templates and also somehow looks more like "real Scala" :-)
I have a section of html code, and am trying to parse it via Perl's XML::LibXML module. I am trying to collect all the events within the html (onclick, onchange, onsubmit, etc), and thought XPath would be useful for identifying them. I know I can do
'//#onclick|//#onchange|//#onsubmit|...'
but was wondering if there's a way to avoid listing them, to ensure that no events are missed. The only idea I had was
'//#on*'
but that doesn't work.
Try doing this:
'//#*[starts-with(name(), "on")]'
The
start-with()
and
name()
are some Xpath functions, check http://www.w3.org/TR/xpath-functions/ & http://www.w3schools.com/xpath/xpath_functions.asp
I stumbled upon this code:
<a href="#" class="text1"{text2}>...</a>
What does the {text2} do? Later on, this HTML is replaced with:
<a href="#" class="text1" {text2} style>...</a>
Is there a way I can retrieve the text2 value with jQuery?
In some cases that code is input in, so scripts can actually easily identify a the line. Or in some cases can be an indicator for a database to retrieve and store data once it has been pulled.
Or it could be invalid markup, doubtful if the person knows what they are doing.
But without any other information or variables it is hard to say. But the most common is access for scripts within Php, Javascript, and even C#. Cause they can parse the HTML document and manipulate it. If those braces are used, and it is incorrectly it will cause a parse error.
Hopefully that sort of clarifies it.
Update:
Yes, jQuery can find it. It is a form of Javascript. You could implement something such as:
$(function() {
var foundString = $('*:contains("{text1}")');
});
There is a vast amount of data that addresses this for more detail.
It does nothing in HTML. It's actually invalid markup. Looks like maybe you have a template system that finds and replaces that before it gets rendered to the browser.
I know that in jinja2, a python templating system, brackets contain commands to the template engine, either as:
Hello, {{varName}}
or:
<ol>
{%for l in varList%}
<li>{{l}}</li>
{%endfor%}
</ol>
That's in jinja, but jinja has similar syntax to django templates, and many other template engines probably copy django's syntax also.
its used in angular js and are called expressions {{expression}}
AngularJS is a JavaScript framework. It can be added to an HTML page with a tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.