We Keep Coding

Accessing a function within a function inside object literals in javascript?

I have some code as follows -
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
document.addEventListener('backbutton',this.receivedEvent.backbutton(),false);
^-- //not working
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var originalLocation, partnership;
function fadeOut(element, direction) {
....
};
function fadeIn(element, direction) {
.....
}
function formFadeIn(direction) {
fadeIn($("#dataform"), direction);
};
function formFadeOut(direction) {
fadeOut($("#dataform"), direction);
};
function backbutton () {
var current = $("#home").attr("page-current");
var prev = $("#home").attr("page-prev");
if (current == "dataform" && prev == "partnertype") {
formFadeOut("opposite");
partnertypeFadeIn("opposite");
setPage("country", "partnertype")
$("#selectcountry").attr("disabled", false).val("AF")
} else if (current == "dataform" && prev == "country") {
formFadeOut("opposite");
countryFadeIn("opposite");
} else if (current == "partnertype" && prev == "country") {
partnertypeFadeOut("opposite");
countryFadeIn("opposite");
} else {
window.location.reload()
}
}
}
};
app.initialize();
So I need to bind the event "backbutton" to the function backbutton() within receivedEvent. function backbutton() is invoking local functions within receivedEvent such as formFadeIn() etc.
I am unable to figure out the exact syntax on binding.
What I've tried -
this.receivedEvent.backbutton //no response
this.receivedEvent.backbutton() //no response
this.receivedEvent.bind(this).backbutton //causes infinite looping on the page
exporting the backbutton() function as return { backbutton : backbutton } //no response
What do I have to do to access function backbutton() from app.initialize() without loosing context?

You could try :
var app = {
initialize: function() {
document.addEventListener('backbutton',this.myBackButtonFunction, false);
},
myBackButtonFunction: function() {
// Your code
}
receivedEvent: function(id) {
// Can also be invoked from here
this.myBackButtonFunction();
},
};
app.initialize();

How do I capture if the enter key has been pressed?

I'm trying to capture if the enter key has been pressed and execute a search. This is the viewmodel for the search page.
(function ()
{
a.viewModels.userSearch = function (view, params) {
$view = $(view);
var self = a.viewModel({
users: a.collection({
url: '/admin/Account/SearchUsers',
query: {
SearchText: null
}
}).fetch(),
setPageIndex: setPageIndex,
search: search
});
$view.keypress(function (e) {
if (e.keyCode == 13) {
self.search(e);
}
});
function search(e) {
self.users.query.rowCount = 0;
self.users.query.pageIndex = 1;
self.users.fetch();
}
function setPageIndex(e) {
e.preventDefault();
self.users.query.set('pageIndex', $(e.currentTarget).data('page-index'));
self.users.fetch();
}
return self;
}
Now, this works. The problem is that it works only after pressing the 'Enter' key 2 times. Seems like I'm missing something related to the scope but js ain't my cup of tea.
If it is of any help, here goes my view model function:
function viewModel(viewModelConfig) {
var self = kendo.observable($.extend({
busy: 0,
resultMessage: null,
clearResultMessage: clearResultMessage
}, viewModelConfig));
self.bind('change', onChange);
function onChange(change) {
var errorProp, errorMsg, infoProp, infoMsg;
if (change.field.endsWith('.busy')) {
if (self.get(change.field))
self.set('busy', self.busy + 1);
else if (self.busy > 0)
self.set('busy', self.busy - 1);
}
else if (change.field.endsWith('.resultMessage')) {
var data = self.get(change.field);
self.set('resultMessage', data);
}
}
function clearResultMessage(e)
{
if (e) e.preventDefault();
self.set('resultMessage', null);
return false;
}
return self;
}

I have a similar setup on my site, and using MVVM, just add the custom enter binding within the data-bind attribute of the element to link to the function within the view-model you wish to execute.
The code to add the custom binder is as such:
kendo.data.binders.widget.enter = kendo.data.Binder.extend({
init: function(element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
var binding = this.bindings.enter;
$(element.element).keyup(function(e) {
if( e.which === 13 )
bindings.get();
});
},
refresh: $.noop
});

JavaScript - Constructing global objects with nested functions

I'm quite new to JavaScript, and for the life of me I can't fugure out how to correctly construct a global object in my script:
var Global =
{
button1Handler: function () {
this.button1 = $("#button1");
this.init = function () {
this.button1.on("click", function () { alert("button1 clicked"); });
}
},
button2Handler: function () { /* ... */ },
init: function () {
this.button1Handler.init();
this.button2Handler.init();
}
};
$(function () {
Global.init();
});
This code produces the following error:
TypeError: this.button1Handler.init is not a function
If I change it to this.button1Handler().init(); the error goes away, but the Button1Handler.init() function never gets called.
How do I correct the code above?

I am not sure why you have to do like this. But if you really want to you can achieve what you want with this:
button1Handler: function () {
return {
button1: $("#button1"),
init: function () {
this.button1.on("click", function () { alert("button1 clicked"); });
}
};
},
and then you can call init as this.button1Handler().init().
In this case this.button1Handler() function returns an object which further has an init method.

You are getting error because this.button1Handler is a function and you will have to create an instance of it to access properties of it.
var Global = {
button1Handler: function() {
//this.button1 = $("#button1");
this.init = function() {
//this.button1.on("click", function () { alert("button1 clicked"); });
console.log("Button1 init")
}
},
button2Handler: function() {
this.init = function() {
console.log("Button2 init")
}
},
init: function() {
new this.button1Handler().init();
new this.button2Handler().init();
}
};
(function() {
Global.init();
})();
A better solution is to return necessary properties:
Sample
var Global = {
button1Handler: function() {
var button1 = $("#button1");
var init = function() {
button1.on("click", function() {
console.log("Button1 clicked")
});
}
return {
init: init
}
},
button2Handler: function() {
var button2 = $("#button2");
var init = function() {
button2.on("click", function() {
console.log("Button2 clicked")
});
}
return {
init: init
}
},
init: function() {
this.button1Handler().init();
this.button2Handler().init();
}
};
(function() {
Global.init();
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="button1">button 1</button>
<button id="button2">button 2</button>
In the following code, button1 is a private variable since it is not exposed using return statement, but init is public property. So you can have any number of properties, but only the properties that you return will be public properties.
button1Handler: function() {
var button1 = $("#button1");
var init = function() {
button1.on("click", function() {
console.log("Button1 clicked")
});
}
return {
init: init
}
}

It is because button1Handler does not return an executed function. In this.button1Handler().init() button1Handler function is invoking the init there this will point to the button1Handler() scope hence function init will be accessible.

jQuery plugins functions overwrite

I have implemented several jQuery plugins for my current project.
Since some plugins have functions with the same name, the one called in the last one defined.
Here is the definition of my first plugin:
$(function($)
{
$.fn.initPlugin1 = function(parameters)
{
var defaultParameters = {};
$(this).data('parameters', $.extend(defaultParameters, parameters));
return $(this);
};
$.fn.function1 = function(){ console.log('Function 1.'); };
$.fn.callFunction = function(){ $(this).function1(); };
});
And here is the definition of my second plugin:
$(function($)
{
$.fn.initPlugin2 = function(parameters)
{
var defaultParameters = {};
$(this).data('parameters', $.extend(defaultParameters, parameters));
return $(this);
};
$.fn.function2 = function(){ console.log('Function 2.'); };
$.fn.callFunction = function(){ $(this).function2(); };
});
I have also this scenario :
$("#div1").initPlugin1().callFunction();
$("#div2").initPlugin2().callFunction();
For this specific scenario the consoles shows: Function 2. Function 2.
In fact, since the callFunction() is also defined in the second plugin, this is the one used.
I would like some advise on what is the best way to solve this problem.
Is it possible to create a thing similiar to a namespace ?

Thank to #syms answer, I have created the following example.
Plugin1:
$(function($) {
$.fn.initPlugin1 = function() {
console.log('Initialized Plugin1');
return $(this);
};
$.fn.initPlugin1.testFunction = function() {
$(this).append('Function 1.');
};
});
Plugin2:
$(function($) {
$.fn.initPlugin2 = function() {
console.log('Initialized Plugin2');
return $(this);
};
$.fn.initPlugin2.testFunction = function() {
$(this).append('Function 2.');
};
});
Main:
(function($)
{
$(document).ready(
function()
{
$("#div1").initPlugin1(); //Run correctly
$("#div2").initPlugin2(); //Run correctly
$("#div1").initPlugin1.testFunction(); //Fail
$("#div2").initPlugin2.testFunction(); //Fail
});
})(jQuery);
When I run my code, I got the following error: Cannot read property 'createDocumentFragment' of null.
Apparently, the this object is corrupted.

you can try this,
$(function($) {
$.fn.initPlugin1 = function() {
console.log('Initialized Plugin1');
return $(this);
};
});
$(function($) {
$.fn.initPlugin2 = function() {
console.log('Initialized Plugin2');
return $(this);
};
$.fn.callFunction = function(param) {
$(this).append(param);
};
});
(function($) {
$(document).ready(
function() {
$("#div1").initPlugin1(); //Run correctly
$("#div2").initPlugin2(); //Run correctly
$("#div1").initPlugin1().callFunction('function1');
$("#div2").initPlugin2().callFunction('function2');
});
})(jQuery);

Module Pattern unit testing

In the following implementation of a hypothetical navigation module the module object returns properties such as isOverBinded or isNavTurnedOff which basically return the consequential value of other methods.
This methods are then utilised in the test cases to check whether a property call has caused its expected consequence.
Should these methods be kept or the original method in question return the consequential values and the same method to be used in the test case?
Currently the code is:
var navModule = (function(element) {
var nav = {};
var navHTMLobjs = {
navList : element,
listItems : element.find('li'),
listLinks : element.find('a')
};
nav.bindOver = function() {
navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
if (e.type == 'mouseover') {
$(this).addClass('over');
}
if (e.type == 'mouseout') {
$(this).removeClass('over');
}
});
};
nav.isOverBinded = function(){
return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover')
&& navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');
};
nav.turnOff = function() {
navHTMLobjs.navList.off('mouseover mouseout');
};
nav.isNavTurnedOff = function() {
return !navHTMLobjs.navList.data.hasOwnProperty('events');
};
nav.init = function() {
this.bindOver();
};
return nav;
});
var myNav = new navModule($('#nav'));
/// Test cases:
module('Navigation module');
test('Binding total', function() {
myNav.init();
equal(myNav.isOverBinded(), true, "Does the init function attach all events?");
});
test('Unbinding total', function() {
myNav.turnOff();
equal(myNav.isNavTurnedOff(), true, "Does the cancel function correctly unbind events?");
});
For example should I change nav.bingOver to be:
nav.bindOver = function() {
navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
if (e.type == 'mouseover') {
$(this).addClass('over');
}
if (e.type == 'mouseout') {
$(this).removeClass('over');
}
});
return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover')
&& navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');
};
...and then use the same method in the test case like below?
test('Binding total', function() {
myNav.init();
equal(myNav.bindOver(), true, "Does the init function attach all events?");
});
What are the differences between the two?
Many thanks

Assuming other parts of the app don't need to independently verify whether the events have been subscribed to, the bindOver() should not return any value. Also, the isOverBinded() doesnt belong to the navigation module. Its existence is purely to help implement the test. In such a case, that function should be within the testing suite.
var navModule = (function(element) {
var nav = {};
var navHTMLobjs = {
navList : element,
listItems : element.find('li'),
listLinks : element.find('a')
};
nav.bindOver = function() {
navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
if (e.type == 'mouseover') {
$(this).addClass('over');
}
if (e.type == 'mouseout') {
$(this).removeClass('over');
}
});
};
nav.turnOff = function() {
navHTMLobjs.navList.off('mouseover mouseout');
};
nav.init = function() {
this.bindOver();
};
return nav;
});
//var myNav = new navModule($('#nav'));
/// Test cases:
module('Navigation module');
// you might already have such a in memory object
$root = $('<ul></ul>').append('<li></li><li></li>');
var myNav = new navModule($root);
test('Binding total', function() {
myNav.init();
equal(isOverBinded(), true, "Does the init function attach all events?");
});
test('Unbinding total', function() {
myNav.turnOff();
equal(isNavTurnedOff(), true, "Does the cancel function correctly unbind events?");
});
var isNavTurnedOff = function() {
return $root.data('events').hasOwnProperty('mouseover') && $root.data('events').hasOwnProperty('mouseout');
}
var isOverBinded = function() {
return $root.data.hasOwnProperty('events') === false;
}
At the end of the day I feel, whether or not the function ought to return a value should depend on the usage of the function and not for making testing easier.