I don't think a function/method should ever return void—instead, it should return this. That's why I was surprised to find out that this doesn't work:
$('buttonContainer').getElement('input').set('value', this.get('value') + ' ');
What the code is suppose to do is find an <input> that is a child of the element with id attribute value of buttonContainer, and add two space characters to its value attribute. The aforeshown code errors though, and I'm forced to write:
var input = $('buttonContainer').getElement('input');
input.set('value', input.get('value') + ' ');
Doesn't MooTools have a way to chain these two seperate statements into one? Something similar to my first snippet?
MooTools cannot rebind this on the fly for every method called. This would be impossible.
You have to understand that every single call to your chain is in the same scope, therefore this remains the same. jQuery and every single other framework have the same problem. If you want to do two operations on an element at the same time, you must store the object in a variable and then use that variable to reference the object exactly like you did in your second example:
var input = $('buttonContainer').getElement('input');
input.set('value', input.get('value') + ' ');
this can only change when the scope changes (which in JavaScript is always when you hit a brace {} enclosing a function). This is not a limitation of MooTools' chaining. It's the way JavaScript in general works.
What you are asking has nothing to do with chaining. this has no context, so your call fails. The solution you are not happy with is the way you will need to write it for other values/attributes, but for a straight forward change like this, write it this way:
$('buttonContainer').getElement('input').value += ' ';
Related
My problem is simple:
I want to concatenate a dynamic variable name in a function, so with the name insert in parameter, when I call the function, she concat automatically the string in the new variable name.
Exemple (wrong, I think):
function blockDL(insertName){
return var 'block' + insertName + 'DT'= document.createElement('dt');
};
blockDL('First');
I expect the code return:
blockFirstDT = document.createElement('dt');
Thanks for your help ! =)
What you want is not possible. See "Variable" variables in Javascript? for alternatives of what you can do.
However, "variable variables" is usually a indicator of bad code design. Especially in your case, there is absolutely no reason or benefit to do any of these. Just name the variables blockDT and paraphDT or whatever you want.
The only way you will be able to use a string for a variable name is by placing it as the property of another object. if you want the variable global you could use the window object.
window['block' + insertName + 'DT'] = document.createElement('dt');
that said, you really shouldn't need to and should probably look for other ways of structuring your code.
I have a situation in which there are main functions named as:
Add_<Element_Type>_Page()
where Element_Type is received as a parameter.
I can see two options to handle the invocation of the correct function:
Write a relatively long switch construct covering all possible values of Element_Type, or
Use some existing mechanism/trick (I'm not aware of) through which I can build a string using the received Element_Type and invoke a function whose name is contained in that string.
Needless to say, all the functions that can be invoked this way have exactly the same signature as far as parameters is concerned.
Obviously, Option 2 would be the best (easy to maintain and very general as no changes are needed whenever a new type of pages is added).
Is this possible to achieve within AngularJS framework?
Thanks in advance.
You can simply do that using the [...] notation instead of .
Like this,
$scope["Add_" + Element_Type + "_Page"]()
will call $scope.Add_test_Page() assuming Element_Type would be test
or if using controllerAs syntax,
vm["Add_" + Element_Type + "_Page"]()
where Element_Type is a received parameter as you mentioned.
If you want to use it inside HTML, you can have a reference to your Element_Type in $scope/vm (whichever way you are using) and access it.
Create an attribute with name func-name and pass your dynamic string value which is your function name to that attribute and within your directive you can do something like this.
scope: {
funcName: '#'
},
controller: function() {
$scope[$scope.funcName]();
}
If you cache a var:
var something = $('#something');
I have seen that being used later as:
$(something).doAction();
something.doAction();
Is there a difference in using either? I have started using something.doAction() as it looks cleaner and easier to read. But I'd like to know if this could cause any problems?
$(...) returns a jQuery object.
If you put a jQuery object in a variable, the variable will still hold a jQuery object in it when you check on it later, just like anything else you might put in a variable.
No magical gremlins will come and get rid of the jQuery object behind your back.
(unless you accidentally put something else in the variable elsewhere)
This has nothing to do with jQuery. This is just a fundamental of Javascript.
var x = foo();
x.something();
Is of course the same as foo().something(). Go study programming or Javascript until this makes sense.
something is a jQuery object and there is no need to put it in brackets with dollar sign as this: $(something)
jQuery selectors return jQuery objects, which is case here $('#something').
Good naming practice would be to name something as $something, so you know that variable contains jQuery object.
Also good use of $(..) example, would be wrapping html as string to get jQuery object, like this:
$divObject = $('<div>Some text</div>');
$divObject.text(); // value is 'Some text'
There is just hold this a jquery object to use it later or avoid repetition.
var $button = $('#button');
$button.click(function(){
//some code here
});
//now applying some style to it
$button.css({color:"#ccc",background:"#333"});
Or could be replace with
var $button = $('#button').css({color:"#ccc",background:"#333"});
$button.click(function(){
//some code here
});
Or
$('#button').css({color:"#ccc",background:"#333"}).click(function(){
//some code here
});;
Update:
Sometimes if you look for a button, jquery will return you the button, not the object so to edit or do some action you pass it as argument to the jquery constructor.
Here a little example. You are just looking for the button and jquery returns that button but if you need to apply some style,event, etc,etc, you would need to pass it as argument to the jquery contructor ($ or jQuery). And here another without the constructor that does not work
In sample code of the yui library, I see this notation:
var obj = document.getElementById("coffee_msg");
obj.style.display = 'block';
As obj is only used once, I would rather prefer this:
document.getElementById("coffee_msg").style.display = 'block';
Is there any reason why the first notation is used in the yui library and many other places?
Are there incompatibilities with certain browsers?
If you only need to set one property it doesn't matter at all (as long as you do not want to check if the return value is valid before trying to access a property of it).
However, if you have multiple properties you'll want to do the lookup only once (even though an id lookup is extremely fast), so assigning the element to a variable is the way to go in that case.
Of course you could make this even shorter with jQuery: $('#coffee_msg').show()
Also has the advantage that you do not get an error if the element does not exist for some reason. And if you want to set multiple CSS properties etc, you can simply use a function that does that for you with a single call or chain multiple calls to different jQuery methods.
The two different ways work exactly the same. Using a temporary obj variable could be useful to improve readability of the code (but it should be given a name better than obj in that case).
There isn't a "real" reason, just to make the code a little bit more readable.
Just like with:
var myAge = 26;
var myAgeNextYear = myAge + 1;
VS:
var myAgeNextYear = 26 + 1;
My personal preference is to keep a reference to the obj only if I'm using it more than once.
The first option is useful because it improves readability, it also makes the obj variable available immediately for other use. I would use this example personally.
I wrote an own document method and it works. Consider the use of it like this:
document.myMethod();
How can I dynamically find out what dot notations were used before myMethod?
document.getElementsByTagName('div')[0].myMethod();
I tried this but it does not work. Any ideas?
Update: I'm making my own getElementsByClass('class'). So I have to know what elements should be checked. document.myMethod() should check all of the elements but document.getElementById('id').myMethod() only the childs of #id. How do I do that?
First of all, myMethod does not exist on 'all' DOM Elements unless you put it on Element.prototype etc, and you really don't want to go down this path.
But if you do, then this will refer to the Element on which the method is invoked on.
Chaining dot notation functions is (I think) just syntactic sugar - you're basically calling the last function on the output of the previous function. As far as I'm aware myMethod() would have no way to know what the function was that provided it's input was, unless you provided it as some kind of parameter on the function, for instance:
document.getElementsByTagName('div')[0].myMethod('getElementsByTagName');
Why do you want this information?