We Keep Coding

Passing variable to a dojo widget constructor

Below code is a representation of my widget. Here I am trying to access variables which are passed from another js.
define(["dojo/_base/declare",
"dojo/_base/lang"], function(declare, lang,){
return declare("myapplication.viewer.js.dynamicview",null,{
getTextBoxValue:null,
constructor : function(args){
alert("inside constructor");
console.log("args",args);
}
});
});
This is my js from where I am calling my widget.
var abc={};
abc.title="helloworld";
var viewerWidget = new myapplication.viewer.js.dynamicview({getTextBoxValue:abc});
Here I am passing an object to my widget variable.
But the problem is that in my widget, args variable in constructor is undefined. I am not sure where I am doing wrong.
Need to get value from my js to my widget.

You are mixin properties of your widget. That is a step later in your widget. See widget lifecycle here.
Your best option is to use postMixInProperties and not the constructor for this particular situation.

You can use "dojo/_base/lang" (mixin) to add new properties to the instance of your class,
use the mixin function (lang.mixin()):
constructor : function(args){
//below add new properties to the current instance
lang.mixin(this, args);
alert("inside constructor");
console.log("args",args);
}

Use mixin in order to "extend" your dojo class with the properties or routines as you wish.
A full example here;
https://jsfiddle.net/tsb3g6f9/9/
More resources here:
https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html
require(['dojo/_base/declare', 'dojo/_base/lang'], function(declare, lang) {
var MyClass = declare(null, {
constructor: function(args) {
lang.mixin(this, args);
},
action: function() {
alert(this.a);
}
});
var obj = {
a: 100
}
var thomas = new MyClass(obj);
thomas.action();
});

Constructor for Javascript Objects

I am trying to create a JAvascript Object with a constructor and 2 methods. I am getting errors when I try to use the following code, what am I doing wrong? Specifically, it wont allow me to define the constructor function as shown below.
var Feed = {
templateDOM: '',
function(tDOM) {
this.templateDOM = tDOM;
},
loadFeed: function(feedPage, feedsPerPage) {
...
},
showFeed: function(data, tDOM, destination) {
...
}
};

You aren't creating a constructor function at all here. It is a plain object, only you forgot to provide a property name for the second value in it.
If you wanted to create a constructor function, it would look more like this:
function Feed(tDOM) {
this.templateDOM = tDOM;
}
Feed.prototype.loadFeed = function loadFeed(feedPage, feedsPerPage) {
};
Feed.prototype.showFeed = function showFeed(data, tDOM, destination) {
};
Which you can then invoke like:
var my_feed = new Feed("some value");
myFeed.loadFeed("some value", "some other value");

I don't think that you approach can take you where you want. In your case you make use of an object literal. How are you going to make use of constructor, when you have already created an object?
I think that the following would be more suitable:
// Define a cosntructor
function TemplateDom(tDom){
this.templateDOM = tDOM;
}
and then add to the prototype of you constructor the methods:
// Add to the prototype of your constructor the following two functions.
// So each object that will be created using this constructor would have
// defined also those two methods.
TemplateDom.prototype.loadFeed = function(feedPage, feedsPerPage) {
...
};
TemplateDom.prototype.showFeed = function(data, tDOM, destination) {
...
};
Then you can create an object like below:
var templateDom = new TemplateDom("here you pass a dom value");
and you can use the functions loadFeed and showFeed as simple as
templateDom.loadFeed("feedpage value","feedsperpage value");
templateDom.showFeed("data value","tDom value","destination value");

How can I refer to a key during object creation in Javascript?

I am trying to create an object with selectors inside. The first one is the context selector which I want to use within the object itself. How can I reference this key within the object?
var options = {
elements: {
"context": $('form#someForm'),
"someDropdown" : $("#someDropDown", this.context),
"someContainer" : $('div#someContainer', this.context),
},
constants: {
buttonImageLocation : 'image.jpg'
}
};
Thanks

JavaScript creates for every function a new scope, not for every block. So in your case this refers to the window and since the window has no context, it is undefined. You could do something like:
var options = {
element: new (function() {
this.context = $('form#someForm');
this.someDropdown = $("#someDropDown", this.context);
...
return this;
})()
}

How do I create an object from a function within another function/object using 'new'

I am trying to create an api that extends some functionality of Tizen.
Tizen has a way of creating objects such as: 'new tizen.ContactName(...)' and 'addressbook = tizen.contact.getDefaultAddressBook();'.
This seems to be a nice way to group together methods and objects when there are a lot of them.
So, for example I want to extend the contact handling:
(An external js-file)
function ContactManager(){ //edited by comment
var self = this;
this.add = function(details, posCallback, negCallback){
//do stuff to add contact
this.otherMethod(){...}
}
etc.
I can call this by using: var contactManager = new ContactManager(); and it works fine.
Now I want to access by include it in another object(?) so that it looks like: var contactManager = new myTizen.ContactManager().
I tried:
function myTizen(){
this.ContactManager = function(){
//methods and stuff
}
}
This doesn't work. Why? How should I build my "API"?

I see it like this
define some object myTizen
then set myTizen.ContactManager = somefunction();

Here's what you want:
function myTizen() {
function whatevername() {
// methods and stuff
}
// you can even extend whatevername's prototype down here
this.ContactManager = whatevername; // please note the lack of parentheses
}
// here's another way you could do it:
function alternateMyTizen() {
}
function alternatewhatever() {
// methods and stuff
}
// extend the prototype if you choose
alternateMyTizen.prototype.ContactManager = alternatewhatever;
The main difference between option 1 and option 2 is that in the second method, your "subclass" remains in scope and can be used independently of your myTizen class, in the first method once the constructor goes out of scope, you can only access it through myTizen.ContactManager.

How do I set Backbone Views as singleton by default?

all my Backbone.Views are only used once in their final state. (Except item views).
Currently I handle Backbone.Views as Singleton this way:
var Singletonizer = function(Singleton) {
if (Singleton._instance) return Singleton._instance;
Singleton._instance = new Singleton();
Singletonizer(Singleton);
};
Unfortunately it isn't that nice to add this little function as dependency to each amd module in my repository.
Is there another way to handle this? Maybe overwriting the base view class?

Just have your module return a function besides your view constructor, one that returns a single instance of it instead, not unlike the following. This way when you load the module you will not automatically get an instance whether you like it or not. Instead, after loading our "FailedXhrView" module, we then get our singleton by calling FailedXhrView()
'use strict';
define(['jquery',
'underscore',
'backbone',
'text!templates/failedXhr.html'],
function($, _, Backbone, failedXhrTemplate) {
var FailedXhrView = Backbone.View.extend({
el : $('#failedxhr-modal-container'),
template : _.template(failedXhrTemplate),
render : function() {
this.$el.html(this.template({}));
this.$el.find('failedxhr-modal-containee').modal();
return this;
}
});
var instance;
return function() {
if (!instance) {
instance = new FailedXhrView();
}
return instance;
}
});

From the very recommendable book Recipes with Backbone:
From here:
// definition
MyApplication.Views.List = Backbone.View.extend();
// instantiation
$(function() {
MyApplication.ListView = new MyApplication.Views.List({
el: $('#list')
});
})
To here:
$(function() {
MyApplication.ListView = new (Backbone.View.extend({
initialize: function() {
// ...
}
}))({el: $('#list')})
});
We assign an instantiation of an anonymous class to MyApplication.ListView. In this approach, we are doing the typical extension of a top-level Backbone class with custom attributes and methods. The difference, however, is that we do not assign the result to a class name as we did earlier. Instead, we immediately create a new instance of this anonymous class. Lastly, MyApplication.ListView is assigned to the resulting object.
I have to say I've never used techniques like this. It looks to messy for me, I prefer legibility than architecture.