Develop Reference

JQuery - how to get the app object from a button click function

In my javascript file, I have defined an app object that takes an initialization function which is triggered upon document ready via JQuery.
$(document).ready(function() {
console.log("JQuery ready");
app.initialize();
});
The app is defined as
var app = {
_GPS_ENABLED: false,
initialize: function() {
var self = this;
// deviceready Event Handler
$(document).on('deviceready', function() {
... ...
// BIND A CLICK EVENT TO A FUNCTION DEFINED IN A LATER STEP
$('#isGPSenabled').on("click", self.isGPSenabled);
... ...
});
},
isGPSenabled: function() {
cordova.plugins.diagnostic.isGpsLocationEnabled(function(enabled) {
// HERE I NEED TO ACCESS THE "APP" ATTRIBUTE "_GPS_ENABLED"
._GPS_ENABLED = enabled; // HOW CAN I ACCESS THE _GPS_ENABLED ATTRIBUTE ON APP
});
}
}
The HTML part has:
<button id = "isGPSenabled">IS GPS ENABLED</button>
How can I access the app's attribute from the function attached to a button?

Previously I've referenced the object by it's name within itself. I think it was a pattern I saw once which worked for my needs at the time. Haven't really thought about the positives or negatives much but it has never caused me any issues in previous work.
Here is an example to to demonstrate:
const app = {
isEnabled: null,
init: () => {
app.isEnabled = false;
},
toggleEnabled: () => {
app.isEnabled = !app.isEnabled;
},
displayEnabled: () => {
console.log('isEnabled?:', app.isEnabled);
}
}
app.displayEnabled(); // null
app.init();
app.displayEnabled(); // false
app.toggleEnabled();
app.displayEnabled(); // true

ReferenceError: template is not defined - Meteor?

I am making two different app's with Meteor. In first app, witch you can see here, I am using ... template.текст.set( true ); ... and everything is working fine. Now in second app I got error
ReferenceError: template is not defined
So, what is the problem? I Checked, packages are same.
Here is the code of second app:
Template.body.onCreated(function bodyOnCreated() {
this.TrenutniKorisnik = new ReactiveVar(true);
});
Template.PrijavaKorisnika.events({
'submit .Prijava': function(event) {
event.preventDefault();
var korisnik = event.target.КорисничкоИме.value;
var šifra = event.target.Лозинка.value;
if (Korisnici.findOne({КорисничкоИме: korisnik, Шифра: šifra})) { template.TrenutniKorisnik.set( false )};
event.target.КорисничкоИме.value = "";
event.target.Лозинка.value = "";
}
});
Template.body.helpers({
TrenutniKorisnik: function() {
return Template.instance().TrenutniKorisnik.get();
},
});

The template instance is the second parameter in an event handler. Simply change this:
'submit .Prijava': function(event) {
to this:
'submit .Prijava': function(event, template) {
so template will be defined in the function body.
Once you solve that, however you'll find that TrenutniKorisnik isn't defined because it's on the body template and not the current template. One way to solve that is to use a file-scoped variable rather than a template one. Here's an example:
var TrenutniKorisnik = new ReactiveVar(true);
Template.PrijavaKorisnika.events({
'submit .Prijava': function (event) {
...
if (Korisnici.findOne({ КорисничкоИме: korisnik, Шифра: šifra })) {
TrenutniKorisnik.set(false);
}
...
},
});
Template.body.helpers({
TrenutniKorisnik: function () {
return TrenutniKorisnik.get();
},
});

Dynamic Component onClick not working

I have a JS Fiddle with the below code.
I have a dynamic component setup, which does work. If I do var Component = Switch or set Component to some other React component, it works. But I want to be able to have it switch when I click on it.
So I set up an onClick event. Yet its not firing. I get no log statements or any change. Any ideas why?
var Other = React.createClass({
render: function () {
return <h2>Test this craziness</h2>;
}
});
var Switch = React.createClass({
render: function () {
return <h2>A different one to switch with</h2>;
}
});
var Hello = React.createClass({
getInitialState: function() {
return {on: true};
},
handleClick: function() {
console.log('handleclick');
this.setState({on: ! this.state.on});
},
render: function() {
console.log(this.state);
var Component = this.state.on ? this.props.component.name : Switch;
return <Component onClick={this.handleClick} />;
}
});
ReactDOM.render(
<Hello component={{name: Other}} />,
document.getElementById('container')
);

Easy! When onClick is put directly on a Component, like you have done, it is NOT set as the onClick function. It is instead placed in this.props.onClick. You still need to add the onClick to your actual DOM Elements. See the attached JSFiddle!

You need to add the onClick attribute to an actual HTML element, i.e.
var Other = React.createClass({
render: function () {
return <h2 onClick={this.props.onClick}>Test this craziness</h2>;
}
});

Script works under "click" event but not alone (Backbone.js)

I have a canvas element attached to the body of the document under the View (separate from it). I would like to append that canvas element to a div inside the View. It works on click, but when I put it inside the render function, it doesn't. This is how the code looks like:
NOT WORKING:
render : function() {
var that = this;
$(this.el).html(this.template());
$('canvas').appendTo('.container3');
return this;
}
WORKING:
events : {
'click .qgaz': 'blabla'
},
blabla : function() {
$('canvas').appendTo('.container3');
}
Why is this happening and how can I make it work on its own when the page loads?
Edit - here goes the complete view:
window.printView = Backbone.View.extend({
tagName : 'div',
className : 'print-menu-view',
initialize : function() {
var that = this;
// tu wybierz template z templates/main.tpl
this.testowaZmienna = "test";
this.template = _.template($("#print-view").html());
console.log(this);
return this;
},
events : {
},
render : function() {
var that = this;
$(this.el).html(this.template());
$('canvas').appendTo('.container3');
console.log(this);
return this;
}
});

When you're trying to access the element by the .container3 selector, it isn't part of the document tree yet, but it's already contained in the cached jQuery object $el:
http://backbonejs.org/#View-$el
Finding .container3 in the cached element
this.$el('.container3').append(...)
should do the trick.

backbone.js: code for calling function from nested view doesn't work

I have made the following code, which runs without errors, but after I press the button, it makes an error: tabClicked is not defined.
var MainView = Backbone.View.extend({
initialize: function() {
},
tabClicked: function(winID) {
alert("test");
}
});
var BottomPanel = MainView.extend( {
initialize: function() {
$("body").append($(this.el));
this.$el.attr("id", "bottomPanel").attr("top", "300px").attr("left", "50px");
this.$el.append($("<button>").click(this.func1));
},
func1: function() {
tabClicked(0);
}
});
$(document).ready(function() {
var mainView = new MainView();
var bottomPanel = new BottomPanel();
});
I made a child window "BottomPanel" of the parent window "MainView".
And my intention was to call a method of MainView from BottomPanel Object.
How to do it?
EDIT 1:
I have changed the code above in one line:
this.$el.append($("<button>").click(this.tabClicked));
Now it works, but I need to save the context. Now this variable when button is clicked points not to the mainView object.

It should be this.tabClicked() otherwise javascript looks at the global namespace where tabClicked is not defined.