This seems like a very simple one, but somehow I am not sure how to do it.
I want to send data to a Polymer component with the "core-collapse-open" event but this is not working:
<core-collapse on-core-collapse-open="{{loadDetails(data)}}">
{{data.Title}}
...
When I use the above code, the loadDetails function in polymer is not hitting.
Polymer('custom-item', {
data: {},
ready: function () {
},
loadDetails: function (e, details, sender) {
debugger;
}
});
If I am not using the function syntax in the declarative syntax(as below), the loadDetails function hits.
<core-collapse on-core-collapse-open="{{loadDetails}}">
{{data.Title}}
...
How can I send parameters in events.
on-core-collapse-open="{{loadDetails(data)}}"
This means: execute loadDetails(data) and whatever the return value of this is will be bound as the event handler. Not what you want.
Also, the event handler function already receives parameters: the event object. You cannot pass it additional parameters. If the data you want to pass refers to your this.data attribute: the loadDetails function already has access to it in the form of this.data, so you don't need to pass it.
If you're trying to use the same handler function for two different events and pass additional parameters with each individual event: traditionally you'd do that with an anonymous function wrapper, and that's simply not possible using the declarative syntax.
You can bind data to an attribute of core-collapse and then access the data using the target argument of the event handler or the target property of the event argument or alternatively if data is the model of the element anyway just access the TemplateInstance (see full example at https://stackoverflow.com/a/24530099/217408)
I got the answer from my another post. Even though I posted for different context, I understand I can use the same. Thanks Gunter for reply on that thread.
Polymer event parameters on repeat
Related
I'm using babel's require hook in node to leverage ES6 but I'm running into some challenges with arrow functions in bluebird promise chains.
I use .bind({}) at the top of my promise chain with an empty object to create shared state where I can store previous values until I need them further down the chain. Bluebird explains this usage as a "useful side purpose".
When I switch to arrow functions, I can no longer use shared state because arrow functions use lexical this which is undefined in babel (babel automatically runs in strict mode).
Working example: https://jsbin.com/veboco/edit?html,js,console
ES6 example (not working): https://jsbin.com/menivu/edit?html,js,console
Is there any way to take advantage of arrow functions in this situation? In my code I call these methods from within an object method - shouldn't this be defined as the object from which the method is called?
If you don't want lexically bound this, there's no need to use arrow functions. If you want dynamically bound this, just don't use arrow functions.
Of course, you could scrap that .bind({}) as a whole and use arrow functions that are bound to the object by putting everything in an object method (or an IIFE in your example):
(function() {
this; // the value that everything is bound to
double(2).then(result => {
this.double = result; // store result here
return triple(2);
}).then(result => {
console.log('double:', this.double);
console.log('triple:', result);
console.log('sum:', this.double + result);
}).catch(err => {
console.log(err.message);
});
}.call({}));
However, there are much better ways to access previous results in a promise chain than contextual state, especially if you are using ES6!
I was testing Jakobs patch on the Sortables Class and this line this.reset() gave me a Uncaught TypeError: undefined is not a function.
I don't understand why since the Class has a method reset.
So my solution was to a var self = this; inside the same end: method (here), and called self.reset(); in the same line as I had this.reset(); before. Worked good. Why?
Then just to check (I suspected already) I did a console.log(this == self) and gave false.
Why does using self work but not this?
Fiddle
In javascript the this keyword change accordingly with the execution context
in global code this refer to the global object
inside eval the scope is the same as the calling context one, if no context provided then is the same as above
in all the case below if the this argument passed to .bind .call or .apply is not an object (or null) this will be the global object
when using a function which has been binded to a specific object using .bind then this refers to the this argument passed to bind, the function is now permabinded.
when running a function the context is provided from the caller, if before the function call operator () there is a dot(.) or a [] operator then this refers to the part on the left of such operator, unless the function is permabinded to something else or we are using .call or .apply if so this refers to the this argument unless the function was previously permabinded;
if before the function call operator () there neither the . nor the [] operators then this will refer to the global object (unless the function stores the result of the .bind function)
when running a constructor function (basically when using new) this refers to the object we are creating
now when using the use strict directive things changes a bit, mostly instead of the global object when the context is not given this will be null, but not in all the cases.
I rarely use "use strict" so I just suggest to try it by yourself when in need.
now, what happens when a function is cached inside a variable like this:
var cache = 'A.foo'
if that you lose the context in which the original function was stored, so in this case foo will not be anymore a property on the instance A and when you run it using
cache()
the context will be evaluated using the rules I wrote above in this case the this will refer to the global object.
The semantics of "this" in Javascript are not what is expected by OO programmers. The symbol "this" refers to the dynamic/runtime calling context, not the lexicographic context. For example, if you have an object A with "method" and then do B.method = A.method; B.method(); then the context is now B and that is what this will point to. The difference becomes very apparent in "handler" type situations where the calling context is usually the object with the handler installed.
Your solution using self is sound.
kentaromiura's answer is absolutely right.
That said, mootools provides function.bind() as a way to decide what this will refer inside of your function. this means that if you simply do this :
var destroy = function () {
`bind() [...]
this.reset();
}.bind(this);
it will work as you intended (that is, this will be the same inside of destroy() and outside).
Now, a lot of coders will balk at fiddling with the context, with good reason as it is very difficult to read and maintain. But here you have it and I think bind() is a very nifty trick of mootools.
I have just spent 4 hours trying to implement a directive with a delegate, with no luck.
Use Case:
I have a directive called "filter".
When the user activates/deactivates the filters the parent scope may want to update the data on the screen.
Before I let the parent run, i want to make some internal changes to an internal data structure and pass the new filter state through to the parent.
I have created a jsfiddel to show a simplified version of what i am trying to do.
http://jsfiddle.net/concept/zADNy/
Here is my scope in the directive
scope : {
onFilterChanged : '&'
},
Here is the intermediary handler
function notifyParent() {
scope.onFilterChanged({filters:scope.filters});
}
Directive Delegates are must be lower case (someone please correct me if that statment is wrong, and if so, then why did the camel case version not work)
Ok so after hours of playing and reading and looking at other people's code, i found out that for some reason the delegate functions need to be lowercase.
Here is the resulting fix
http://jsfiddle.net/concept/zADNy/4/
Here is my scope in the directive
scope : {
onfilterchanged : '&'
},
Here is the intermediary handler
function notifyParent() {
scope.onfilterchanged({filters:scope.filters});
}
I am using sencha touch. Can i call parametrized handler function on an item of action sheet ? If yes then how to do this. Kindly help me ..
I want to do this ,,
var z = function test(){alert('Hellow')};
In the handler function :
handler:function(z){
alert(z);
}
it is not working .. Just showing .. "Index.html (Object:Object)"
Thanx in advance
Yes, you can do this but this is based on the parameters provided by the caller of the handler. In case of it button this would be the 'click' event. But you can always view all passed arguments when reading the arguments array like
handler:function(){
console.log(arguments);
}
and if you know that there is for example one argument you know you (lets take the button) can define it
handler:function(btn){
btn.disable();
}
You also need to know that alert is not capable of printing JavaScript Objects! Use console.log for this.
I have a Flash game which send and receive lot of messages from JavaScript.
Sometimes I need to stop listening some of those functions, but ExternalInterface doesn't have a removeCallback function. So I'm doing somthing ugly: using a boolean to validate if a callback is available in each function.
Any better solution?
ExternalInterface.addCallback("callAlert", callAlert);
function callAlert(msg:String){
if(callAlertAvailable){
//...
}
}
Just call again addCallback, setting the function as null:
ExternalInterface.addCallback("callAlert", null);
Why not read the docs? I found it here:
ExternalInterface.addCallback()
Note: Repeating addCallback() on an existing callback function with a
null closure value removes the callback.