I saw example code on https://github.com/lukemelia/jquery-ui-ember. Can some one tell me what is this.$()
you can see this on jquery-ui-ember-master\jquery-ui-ember-master\js\app.js
this.$() is a call of the $-method of your current objectscope.
this refers to your current object.
$ is a function of this.
() will call the function $ of this.
When you create a Component, in its code this.$() gives you a jQuery object reference, set to the element that was inserted into the dom by that Component (its outer tag, usually a div unless you told it otherwise). You can then use for example this.$('.myclass') to find the element with the class myclass within the section of HTML that is handled by that Component without having to specify an id attribute to find the correct set of elements.
This probably also applies to the Views, but you should be using a Component instead whenever possible.
As Leeft said this.$() will give you the reference to the jQuery object, but typically you should only want to get the reference to the jQuery object in didInsertElement where the component has been inserted into the DOM and you can do jQuery-UI stuff on the element.
Related
I am trying to re-write some jquery so that uses a selector I had previously created, so that it doesn't need to access the DOM again. The selector I had created already access the DOM once, and I want to use its contents in a string literal in a function.
My current code is the following:
$(this.$content[$(`.nav a[href$="${window.location.hash}"]`).parent().index()]).show();
which works just fine, but ".nav a" is accessing the DOM, which I do not want in this instance. I want to use this.$navigation, which I had created before and already has the information from the DOM. I tried writing it as
$(this.$content[$(`this.$navigation.find('a')[href$="${window.location.hash}"]`).parent().index()]).show();
where this.navigation = $("#main-nav"), the parent of the .nav elements, but it does not work in this way.
Any suggestions on how I might approach this?
The inner jQuery object should be moved outside of the string literal, and the attribute selector needs to be placed inside the find() call.
$(this.$content[$(this.$navigation).find(`a[href$="${window.location.hash}"]`).parent().index()]).show();
In addition, I would assume from the naming convention that $navigation already holds a jQuery object so does not need to be wrapped again. As such, this should work:
$(this.$content[this.$navigation.find(`a[href$="${window.location.hash}"]`).parent().index()]).show();
How do I access an element from within the mounted function in a VueJS instance.
When I try the following, it tells me that the element is undefined. When I see the DOM it is there. Could this be a case where the element is not rendered before I try to reference it?
document.getElementsByName('transferDate_submit')[0].addEventListener("change",function(){});
You get a HTMLElement instance when you call your Vue.js instance with $el. Check the API.
Example
let allLinks = this.$el.querySelectorAll('a')
Alternatively, you could use a ref. This is a like a programmatic ID. Also check the API.
Example
<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
You can just use v-on:change or #change to bind your event listener so that you can avoid manipulating DOM element. Besides, Vue.js is to make you not to DOM as far as possible
Well, out of the box, jQuery does not have support for selecting nodes inside webcomponent(s). (probably because document.querySelector() does not work for shadow DOM (nor it should, by definition)).
Our previous codebase was somewhat dependent on jQuery and many of the devs do not want to let go of the simplicity of $(...) selection. So, I wrapped up this quick and dirty trick.
window.$$ = function (that, selector) {
return $(that.shadowRoot.querySelectorAll(selector));
}
Usage (inside a lifetime callback or whenever the host node can be accessed):
jqel = $$(this, '.myClass'); // this has reference to the host
The question is, is there a better way to go about this?
i have created a jquery-polymer plugin that has a lot of functions that may help you dealing with polymer shadow dom
https://github.com/digital-flowers/jquery-polymer
to select any element inside a polymer element lets say
<my-button id='button1'></my-button>
first you need to get the button shadow root using
$("#button1").getShadowRoot()
or
$("#button1").shadow()
this will return the button shadow root as jquery object then you can select anything inside it for example
$("#button1").shadow().find("ul > li:first")
cheers ;)
As far as I know Jquery permits passing context as parameter JqueryContext, so the proper way would be:
$('selector',context)
As an example:
var component1 = document.querySelector('qr-code');
// Find some img inside qr-code component
var img1 = $('img',component1)
I have seen the use of $(this) and understand within the function, but also have seen in a selector as well, but fail to understand when or if it is valuable. Here are two examples I can use and get to work, but am I really doing anything valuable...
Here I added $(this) in selectors
(function($) {
$(".deliver").on('mouseenter',function(){
$(this).css({'width':'600px'});
$(".form_jquery",$(this)).fadeIn(1000).css({'display':'block'});
$(".componentheading",$(this)).css({'display':'none'});
}); ...
Here is my original script
(function($) {
$(".deliver").on('mouseenter',function(){
$(this).css({'width':'600px'});
$(".form_jquery").fadeIn(1000).css({'display':'block'});
$(".componentheading").css({'display':'none'});
});
I have kept what I know as the standard use of (this) in both and noting that I am using in a anonymous function in case this factors in.
$(".componentheading",$(this))
only searches the .componentheading elements under the current $(this) element (in this particular case it's a .deliver which you entered the mouse) whereas
$(".componentheading")
searches them in the whole document.
http://api.jquery.com/jQuery/#jQuery1
Providing a second argument to the jQuery function narrows the context of the selection. By default, the context is the entire document.
In the case of using $(this) as a context, you are only looking for elements with the form_jquery or componentheading classes inside of the element triggering the mouseenter handler.
Providing a context to narrow the selector searches is a good way to improve your selector performance, as long as you know that the element you're looking for can indeed be found in that context.
$( selector, context )
The actual function for jQuery looks like this jQuery( selector, context ), if you provide an element for the context value, when jQuery tries to jQuery.find your element, it will start with element you provided.
In many cases this can provide a performance boost!
Read about jQuery Context
To supply an element to the jQuery function, a lot of people employ a method called DOM caching where you store the element in a variable and pass it to the jQuery function as the referencing context.
I am trying to learn backbone. I understand that el is the element that is being acted on. If it isnt specified it is an empty div. I am creating a template inside my view and returning the view object. I am then rendering the view, but I dont understand why I chain el after the render function. Could someone please explain this line of code to me:
var view = new PersonView();
this.$('#family_list').children().append(view.render().el);
What is the el for? Thanks.
jQuery's .append() method expects a string of HTML or a DOM element to be appended to its calling node.
The .el property of the view is its bound DOM element. After calling view.render(), its .el DOM element property is passed into the jQuery .append() method, so jQuery .append() gets the updated (newly rendered) DOM node.
This is made possible because the .render() call must be returning this as suggested in the documentation. Its return value is therefore the view object itself1, and from that the .el can be referenced immediately.
1 Wikipedia: Fluent interfaces