I have my javascript code like this . Inside that I have an init() function and in that function I have an options JSON object and in that object I have a function defined as objectselected(). How I call that function in a button click event
I have tried like this WorkFlow.init().options.Objectselected() but it is not working,
var WorkFlow = {
connectionData: [],
selectedTouchpoints: [],
init: function () {
var options = {
palleteId: "myPaletteElement",
elementId: "playAreaContainer",
TextStoreList: ['One', 'Two', 'Three'],
LinkTextStoreList: $('#drpLinkType option').map(function () {
return this.text;
}).get(),
shapeList: ['RoundedRectangle', 'Circle', 'Rectangle', 'Ellipse', 'Square', 'Diamond', 'Card', 'Database'],
diagramUpdate: function (e) {
},
objectSelected: function (e) {
},
linkUpdate: function (e) {
},
initialize: function () {
}
myGraph = new Graph(options);
options.initialize();
},
}
How to call that function.
One way around is you can return options and than call it.
init: function () {
var options = {
...your code..}
return options;
},
and call it than
var options = WorkFlow.init();
options.Objectselected();
As it stands, you have no access to options because it's a local variable - that is, local to its scope.
To access its contents, you'll need to return it from init().
Think about it:
WorkFlow.init()
Currently this returns undefined, because your init() returns nothing. You're trying to chain like in jQuery, but that relies on the API always returning the instance. Your path finds a dead-end at init().
To fix this, have init() return options - or at least the part of it you want to access from outside - an "export".
So (basic example)
init: function() {
var options {
my_func: function() { }, //<-- we want outside access to this
private: 'blah' //<-- this can stay private - leave it out of the export
}
//return an export, exposing only what we need to
return {
my_func: options.my_func
}
}
You need to return options as it is inside init function's scope
var WorkFlow = {
connectionData: [],
selectedTouchpoints: [],
init: function () {
var options = {
palleteId: "myPaletteElement",
elementId: "playAreaContainer",
TextStoreList: ['One', 'Two', 'Three'],
LinkTextStoreList: $('#drpLinkType option').map(function () {
return this.text;
}).get(),
shapeList: ['RoundedRectangle', 'Circle', 'Rectangle', 'Ellipse', 'Square', 'Diamond', 'Card', 'Database'],
diagramUpdate: function (e) {
},
objectSelected: function (e) {
},
linkUpdate: function (e) {
},
initialize: function () {
}
myGraph = new Graph(options);
options.initialize();
return options;
},
}
And call it as WorkFlow.init().objectSelected();
Building on Patrick's comment, you'd need to return options from the init function:
var WorkFlow = {
connectionData: [],
selectedTouchpoints: [],
init: function () {
var options = {
palleteId: "myPaletteElement",
...
options.initialize();
return options;
},
}
With a normal view model I can call a function after initialization outside of it's context like so:
var ViewModel = function () {
this.Foo = function () {
alert("bar");
};
};
var vm = new ViewModel();
ko.applyBindings(vm);
vm.Foo();
http://jsfiddle.net/h01ky3pv/
How do I do something like this with a component's view model? I want to call FooComponentViewModel's Foo function when the foo component is first loaded.
ko.components.register("foo", {
viewModel: FooComponentViewModel,
template: {
element: "component-foo"
}
});
function FooComponentViewModel(params) {
this.Foo = function () {
alert("bar");
};
}
var ViewModel = function () {
// empty
};
var vm = ViewModel();
ko.applyBindings();
http://jsfiddle.net/r3d41q6c/2/
Just an idea, pass a callback as a parameter for the component:
HTML:
<foo params="callback: callback"></foo>
JS:
function FooComponentViewModel(params) {
this.Foo = function () {
alert("bar");
};
params.callback(this);
}
function ViewModel() {
this.callback = function(vm) {
vm.Foo();
};
}
http://jsfiddle.net/r3d41q6c/3/
I'm trying to write a simple test using page objects pattern - based on the 'docs/page-objects'.
I created a file describing the page object and other using this page object to test a page.
//page object
var LoginPage = function() {
this.userInput = browser.driver.findElement(by.id('username'));
this.pwdInput = browser.driver.findElement(by.id('password'));
this.btnEnter = browser.driver.findElement(by.id('btnLogin'));
this.get = function(){
browser.get('http://example.com');
};
this.setUser = function (user){
this.userInput.sendKeys(user);
};
this.setPasswd = function (password) {
this.pwdInput.sendKeys(password);
};
this.clickBtnEnter = function (){
btnEnter.click();
};};
The spec file:
var loginPage = require('./LoginPage.js');
describe('myApp', function() {
it('should save contract config', function (){
loginPage.get();
loginPage.setUser('userid');
loginPage.setPasswd('passwd');
loginPage.clickBtnEnter();
});
});
The following error is shown when I run this test: TypeError: Object # has no method 'get' - at this line: loginPage.get();.
When I was searching for this problem I found various approaches about using page objects in Protractor, such as Astrolable.
Now I am not sure about the correct usage of page objects.
Do you have any ideas about how I can fix this test?
Thank you guys.
Try this:
Ensure you have the following in your LoginPage.js file
module.exports = LoginPage;
Add the missing new keyword
var LoginPage = require('./LoginPage.js');
var loginPage = new LoginPage();
After trying the above syntax (no success) I rewrote the page object using the Astrolable. Now it works! My test looks like this:
//pageobject
'use strict';
var env = require('./environment.js')
var LoginPage = function () {
browser.driver.get('http://example.com');
};
LoginPage.prototype = Object.create({}, {
userInput: { get: function() { return browser.driver.findElement(by.id('username'));}},
pwdInput: { get: function() { return browser.driver.findElement(by.id('password'));}},
btnEnter: { get: function() { return browser.driver.findElement(by.id('btnLogin'));}},
setUser: { value: function (loginName) {
this.userInput.sendKeys(loginName);
}},
setPasswd: { value: function (loginPass) {
this.pwdInput.sendKeys(loginPass);
}},
clickBtnEnter: { get: function() { return this.btnEnter.click();}}
});
module.exports = LoginPage;
Spec file:
'use strict';
var loginPage = require('./LoginPage.js');
describe('myApp', function() {
var poLogin = new loginPage();
it('should save contract config', function (){
poLogin.setUser('userid');
poLogin.setPasswd('passwd');
poLogin.clickBtnEnter;
});
});
Now it is working fine.
Thanks for answering.
I'm trying to figure out how to use this._super when the Ember's object method is called from a callback.
I know that I could assign var _super = this._super before the callback is called but I don't like it.
I want to have the this object containing proper _super method inside the callback.
My code is here: http://emberjs.jsbin.com/hasehija/6/edit.
App.BaseMixin = Ember.Mixin.create({
init: function() {
console.log("base");
}
});
App.Utils = Ember.Object.extend({
callbackMethod: function(callback, ctx) {
// asynchronous callback
Ember.run(function() {
callback.call(ctx);
});
}
});
App.MyObject = Ember.Object.extend(App.BaseMixin, {
init: function() {
console.log("MyObject");
var _super = this._super;
App.Utils.create().callbackMethod(function() {
this._super(); // this._super is undefined here
// _super() would work
}, this);
}
});
App.ApplicationController = Ember.Controller.extend({
init: function() {
new App.MyObject();
}
});
Do you know any way to fix it?
UPDATE:
It turned out that it was fixed in Ember 1.5.0 (#GJK: thank you for the answer) and I was using Ember 1.4.0.
extend defines a class
App.Utils = Ember.Object.extend({
callbackMethod: function(callback, ctx) {
callback.call(ctx);
}
});
create builds an instance of the class
App.Utils = Ember.Object.create({
callbackMethod: function(callback, ctx) {
callback.call(ctx);
}
});
or
App.Utils.create().callbackMethod(function() {
this._super();
}, this);
http://emberjs.jsbin.com/hasehija/7/edit
Or avoid overriding init
App.ApplicationController = Ember.Controller.extend({
doSomething: function() {
new App.MyObject();
}.on('init')
});
I like the idea of using Singleton mentioned here http://www.adobe.com/devnet/html5/articles/javascript-design-patterns-pt1-singleton-composite-facade.html:
var Namespace = {
Util: {
util_method1: function() {…},
util_method2: function() {…}
},
Ajax: {
ajax_method: function() {…}
},
some_method: function() {…}
};
Let's say I have to add some methods and new namespace too (Namespace.Util2) later, how can I add methods without modifying the above code
It is simply:
Namespace.Util.newUtilMethod = function () { };
To add a new namespace,
Namespace.Util2 = { /* definitions */ };
namespace.util.newFunc = function () { };
or, if you're using jquery and want to add a bunch at once:
var newStuff = {
newThing1: function () {...},
newThing2: function () {...},
newThing3: function () {...}
};
$.extend(namespace.util, newStuff);