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
Related
I'm creating a JQuery object(let's call it $dummyHTML) and setting some html content inside it. Then I go through each of it's child nodes including text ones, do some checks, and append them to a new different JQuery Object(let's call it $refinedHTML).
But the problem is that the contents of $dummyHTML seems to be empty even before I append them to $refinedHTML!
Now, I know that JQuery append function doesn't copy a node, it actually transfers the node to the other JQuery object. So I'm guessing the append function triggers before I mean it to?
Here is a minified example of the issue.
var $dummyHTML = $('<div/>');
$dummyHTML.html('Hello there, <span>myself!</span>');
var $refinedHTML = $('<div/>');
console.log($dummyHTML[0]);
$dummyHTML.contents().each(function() {
$refinedHTML.append($(this));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But if I remove the .contents part the programs works as expected.
.contents() extracts the content of a DOM element .When you create an object on the fly,it is not yet a DOM element so .contents() will not work however you can manipulate the object data in other ways.
Reference here:
Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements.
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.
I would like to know if it's possible to access an object property from an appended element. For example:
function anyFct(){
this.div=$('<div ref="dv">').html('Hi').appendTo('body');
div.animal='dog';
div.yld=function(){
alert(div.animal);
};
$('input type="text" value="anyIn" onclick="yeldAnimal(this);"').appendTo(div);
}
function yeldAnimal(obj){
var actElement=$(obj).closest('div[ref=dv]');
actElement.yld(); // I want that this yields 'dog'
}
and my HTML:
<input type="button" value="test" onclick="anyFct();">
So this is the logic: I create a div element when the button is clicked on. This div element has a text that when clicked on calls an external function that calls a method on its parent element (the div).
For many contextual reasons this must be the logic. I've already found a solution that is saving the object div in a global array and then search in all values of the array for the object that triggered the method. However, I would like to know if there is a 'cleaner' or correct way to do this.
It's possible, and there are a couple of ways you could achieve it. The important thing you need to understand is the distinction between jQuery objects and actual DOM elements. When you use jQuery to create a <div> element, you create both; but what you end up with a reference to is the jQuery object - or, if you're chaining jQuery function calls, the result of the last function called. The DOM element, assuming you actually append it to the DOM, persists once that section of code has finished execution, but the jQuery object that's created will vanish when that variable goes out of scope.
When you execute some jQuery code later on to get a reference to your DOM element, it's referring to the same element on your page but it's a different jQuery object, so any custom properties you added to the original one won't be available. How do you get around that? Set the properties on the actual DOM element.
You can use the .get() method to access the underlying DOM element from a jQuery object, indexed from 0 (so .get(0) called on a jQuery object will return the first DOM element it references). With that you can then set your custom properties and later retrieve them, something like this:
function anyFct(){
this.div=$('<div ref="dv">').html('Hi').appendTo('body');
var elem = div.get(0); // the actual DOM element, the div
elem.animal='dog';
elem.yld=function(){
alert(elem.animal);
};
$('<input type="text" value="anyIn" onclick="yeldAnimal(this);"/>').appendTo(div);
}
function yeldAnimal(obj){
var actElement=$(obj).closest('div[ref=dv]').get(0); // also the div
actElement.yld(); // alerts 'dog'
}
jsFiddle demo
Note that I've made a few changes to your code in addition to adding in the usage of .get(), most notably correcting the syntax for creating the <input type="text"> element in the first function.
Okay, most of this is not syntactically correct javascript and seems to be overly complicated. I believe if I understand what you're trying to achieve you want the following:
function anyFct(){
var div=$('<div ref="dv">').html('Hi');
div.animal='dog';
div.yld=function(){
alert(this.animal);
};
var element = $('<input type="text" value="anyIn">');
$(element).click(function() {
div.yld();
});
$(div).append(element);
$('body').append(div);
}
This is killing me, being reading the examples on this site but can't figure out why it works like this.
I want to pass back values to my view, which has buttons that you can use to change the values.
If I use the following
this.$el.empty().html(view.el)
View.el contains the correct html, but those not render on the screen. If I use the following
$("#handicap").html( view.el);
The values get displayed on screen but the events no longer get picked up eventhough if I put an onclick function in the html code it kicks off.
Ideally I would like to get this.$el.empty().html(view.el) working. It has to do with context but can't see why.
I have created a jsbin here http://jsbin.com/iritex/1/edit
If I have to use $("#handicap").html( view.el), do I need to do something special to unbind events. I have tried undelegate everything but that didn't do the trick either.
thanks
A Backbone View's el property will always contain a reference to a valid DOM object. However, that DOM object may or may not be in your display tree. It's up to you to make sure it's in the display tree when you need it to be. This functionality lets Backbone maintain the state of it's View element without it being rendered to the screen. You can add and remove a view from the screen efficiently, for example.
There are a few ways to get your View's element into the display tree.
1) Associate the view with an existing DOM element on the page by passing in a jquery selector to the initializer as the "el" property.
var view = new MyView({el: '#MyElementSelector'});
2) Associate the view with an existing DOM element on the page by hardcoding the jQuery selector it into the view's "el" property.
var MyView = Backbone.View.extend({
el: '#MyElementSelector'
});
3) Render it to the page from within another view
var view = new MyView();
view.render();
this.$el.empty().html(view.el);
If you're interested, I show examples in a Backbone Demo I put together.
You need to put both views into the DOM. Wherever you create the view that above is this needs to be inserted into the DOM. If you do that, then the first line will work fine this.$el.empty().html(view.el).
Can I do
<div class="some_div">some div</div>
<script>
jQuery('.some_div').data('some_data','some info').remove();
</script>
where the information is added with data's method, is still around the DOM? Do I need to uninitialize? Is the information automatically removed when the div element has no references left?
The data is stored in a variable available to the jQuery objects via closure. It is never stored in the dom. Remove method deletes the data along with the DOM element.
.remove( [ selector ] )
Similar to .empty(), the .remove()
method takes elements out of the DOM.
We use .remove() when we want to
remove the element itself, as well as
everything inside it. In addition to
the elements themselves, all bound
events and jQuery data associated with
the elements are removed.
source: jQuery API: remove()
jQuery places a serial number on DOM elements when needed, and uses that reference to look up associated data for the element.
For example: jQuery1278101043588: 1
As long as the element exists, your data should exist. No references to the element in code are needed.
The data associated with an element is cleaned up when you call .remove() or .empty().
If you wish to remove an element from the DOM without losing the data, you can use .detach().
http://api.jquery.com/remove/
http://api.jquery.com/empty/
http://api.jquery.com/detach/
jQuery also has a .removeData() method for clearing data that is no longer needed. It will clear all data on the element(s) if called without passing an argument.
http://api.jquery.com/removeData/