This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I am trying to call a generic function but when that function is executed I am in a different scope (window). This code will picture the case:
Ext.application({
name : 'Fiddle',
context: null,
function1 : function(){
this.function2(this.function3);
},
function2 : function(func){
func();
},
function3 : function(){
if(context == this){
Ext.Msg.alert('Fiddle', 'Same context!');
}
else {
Ext.Msg.alert('Fiddle', 'Different context!');
}
},
launch : function() {
context = this;
this.function1();
}
});
I am trying to use bind but it is not working.
Thanks!
EDIT: I am so sorry guys, I said Javascript instead of Sencha. I thought the issue would be the same in Javascript and I could get more help. I apologise. I created a code in fiddle to replicate the issue. Thanks to all the comments and help, they are really appreciated!
You can use the bind method to bind your context (this).
function1 : function(arg){
this.function2(this.function3.bind(this), arg) // using bind
},
function2 : function(func, arg){
func(arg); // <-- Issue
},
function3 : function(arg){
// this = window... I lost the scope??
},
Related
This question already has answers here:
Backbone router with multiple parameters
(2 answers)
Closed 6 years ago.
PLEASE INVEST SOME TIME READING THE QUESTION COMPLETELY BEFORE MARKING OR ANSWERING
I want to display text from data in url and access it using the same. Eg.
http://stackoverflow.com/questions/24888693/how-does-out-parameter-work
Notice how this page is accessed using the param how-does-out-parameter-work
Currently i am using requireJs with backboneJs in my web app. So, in my router i am routing like
siteTitle = 'Boiler Plate';
define([
'jquery',
'underscore',
'backbone',
'handlebars',
'jcookie',
'views/home',
'views/404'
], function ($, _, Backbone, Handlebars, jcookie, HomePage, FoFPage) {
var AppRouter = Backbone.Router.extend({
routes: {
':*':'home',
'home' : 'home',
'home/:a' : 'home',
'*whatever' : '404'
},
home: function (a) {
document.title = siteTitle + ' - Home';
homePage = new HomePage({route: a});
homePage.render();
},
404: function(){
document.title = siteTitle + ' - 404';
fofPage = new FoFPage;
fofPage.render();
}
});
var initialize = function () {
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize,
AppRouter: AppRouter
}
});
Notice that i am getting the passed parameter a and them loading the page accordingly. Currently i am setting that parameter a as a number that is my post ID and using it accordingly. Bu if i want to pass a portion of my post's heading and access it how can i do that?
I can think of one way is selecting substring from mysql data base and based on url input but it wont help as if the parameter is how-does-out-parameter-work i can never parse it as How does 'out' (parameter) work? which is actual text in database. What am i missing?
UPDATE
the ignoring the post param is only applicable in stackvoerflow not on this site
https://www.theguardian.com/us-news/2016/nov/10/hate-crime-spike-us-donald-trump-president is using something else. What am i missing?
If you're attempting to follow the same process as Stackoverflow, they appear to use an Id for each question. I can only speculate what the title parameter is used for.
http://stackoverflow.com/questions/24888693/how-does-out-parameter-work
Equates to the following:
{domain}/{questions}/{questionId}/{title-string}
You can see that the title-string is an option parameter as the following will still route you to the correct question
http://stackoverflow.com/questions/24888693
The additional parameter is likely to stop duplicate Ids causing an issue in the database if the question Id counter has to be reset.
Maybe you can clarify why you need to search for a hypenated string in the databse?
I was wondering if it was possible to pass a function foo() as an attribute func="foo()" and have it called this.func() inside of the polymer element?
<foo-bar func="foo()"></foo-bar>
Polymer({
is: 'foo-bar',
properties: {
func: Object,
},
ready: function() {
this.func();
}
});
I've been trying to get this working for ages with no luck.
Thanks in advance.
<foo-bar func="foo()"></foo-bar>
Polymer({
is: 'foo-bar',
properties: {
func: {
type: String, // the function call is passed in as a string
notify: true
},
attached: function() {
if (this.func) {
this.callFunc = new Function('return '+ this.func);
this.callFunc(); // can now be called here or elsewhere in the Polymer object
}
});
So the trick is that "foo( )" is a string when you first pass it to the Polymer element. I fought with this for a while as well and this is the only way I could find to get it done. This solution creates a function that returns your function call, which you assign as the value of one of your polymer element properties.
Some people might say you shouldn't use the Function constructor because it is similar to eval( ) and.... well you know, the whole 'eval is evil' thing. But if you're just using it to return a call to another function and you understand the scope implications then I think this could be an appropriate use-case. If I'm wrong I'm sure someone will let us know!
Here's a link to a nice SO answer about the differences between eval( ) and the Function constructor in case it can help: https://stackoverflow.com/a/4599946/2629361
Lastly, I put this in the 'attached' lifecycle event to be on the safe side because it occurs later than 'ready'. I'm not sure if an earlier lifecycle event or 'ready' could be used instead of 'attached'. Perhaps someone can improve this answer and let us know.
I know you can have optional property using a question mark like x:"=?" and then you can check if it is specified by checking if x is undefined or null.
How can I do similar thing for a function? Oftentimes, I want to hide a control if the function is not specified. I have to define another property for this purpose to workaround this problem. I wonder if there is a way to save this extra property.
I found an answer to this question at here. Here is a recap in case somebody is interested:
In directive:
scope: {
callback: '&'
},
link: function(scope, elem, attrs) {
scope.hasCallback = function() {
return angular.isDefined(attrs.callback);
}
}
In html:
Call me back
I like it very much because it saves me an extra parameter.
I need your help.
I have a directive with a function parameter ( scope: { myParam: '#'}). And I'm passing the parameters in HTML, like my-param="myFunc(param1, param2)"
This works perfectly. But, I need to inject the event object in to the parameters. Does some one know how can I do that?
I tried $provider.annotate and $provider.instantiate, but they did not work because it's taking the reference function in directive. ($a in my case), so it can't get the function arguments.
any idea?
When you're calling a function created by the & isolate scope syntax, you can pass parameters to it as a named map. If your directive is defined like this:
scope: { myParam: '&' },
link: function (scope, el) {
el.on('click', function (e) {
scope.myParam({$event: e});
});
}
and used like this:
<my-directive my-param="console.log($event)"></my-directive>
... you should see the desired behavior.
chrisrhoden's answer is great. I would suggest to expand upon it a bit with the following. Doing so will help prevent ng-click double-firing issues relating to mobile devices and/or AngularJS conflicts with jQuery.
myApp.directive('responsiveClick', function(){
return {
scope: { myCb: '&' },
link: function (scope, el,attr) {
el.bind('touchstart click', function (e) {
e.preventDefault();
e.stopPropagation();
scope.myCb({$event: e});
});
}
}
});
along with the markup as follows:
<a class="mdi-navigation-cancel" my-cb="removeBasketItem($event,item)" responsive-click></a>
have you tried passing it in the original function?
my-param="myFunc($event, param1, param2)"
This question already has answers here:
phoneGap camera and sencha touch view
(3 answers)
Closed 9 years ago.
I am working on sencha from last 20 days or so i have learnt a lot , I have got access to device camera and capturing photo using that camera but the problem is that i want to show that captured image in a Div in my page using a button .. Couldn;t got the solution Please help if anyone knows .. Take a look at this ..
{
xtype:'button',
text:'Tap',
docked:'top',
handler:function(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
Ext.Msg.alert('Failed because: ' + message);
} }
},
{
xtype:'container',
html:'<div style="border:solid;border-color:red">Hello</div>',
id:'picture',
},
{
xtype:'container',
html:'<div style="border:solid; border-color=green">Hellow</div>',
items:[
{
xtype:'button',
text:'Get',
}
]
},
what i have to do now ??
You need to do something with the element that has ID 'myImages'. In the onSuccess function you are setting the src of that element accordingly, but where is the element actually used? You should add it to one of the containers, either in the initial definition or when onSuccess is called. If you want to wait until the button with text 'Get' is pressed then either have that button's handler append the myImages element, or hide/show it.