Develop Reference

Require.js Uncaught TypeError: jqOAuth is not a function

I would like to use jQuery OAuth library in my application.
Right now I'm trying to initialize it in main.js file.
I defined paths for this lib and it's dependency store.js:
requirejs.config({
paths: {
store: "../Scripts/store.min",
jqueryOAuth: "../Scripts/jquery.oauth"
}
});
And I took an example from jQuery OAuth page how to do an initialization:
define(["store", "jqueryOAuth"], function (store, jqOAuth) {
if (!store.enabled) {
alert("Store not enabled");
return;
}
var auth = new jqOAuth({ // <--- Uncaught TypeError: jqOAuth is not a function
events: {
login: function() {},
logout: function() {},
tokenExpiration: function() {}
}
});
});
When I open my website I get the error in console:
Uncaught TypeError: jqOAuth is not a function
But if you take a look at jquery.oauth.js file, you'll see, that there's a function called jqOAuth.
Do you have any idea what I'm doing wrong?
I'm quite new to javascript stuff and maybe I'm missing something?

Turns out, that I was overriding global jqOAuth function with my local variable of the same name.
Here's working code:
define(["store", "jqueryOAuth"], function (store) {
if (!store.enabled) {
alert("Store not enabled");
return;
}
var auth = new jqOAuth({
events: {
login: function() {},
logout: function() {},
tokenExpiration: function() {}
}
});
});

Backbone.js _ensureElement error

I'm getting this error, when I want to initialize the view from router class.
Error is:
Uncaught TypeError: Object # has no method '_ensureElement'
BlogFormView:
App.BlogFormView = Backbone.View.extend({
el: ".data-form",
initialize: function(){
this.template = _.template($("#blog_form_template").html());
this.render();
},
render: function(){
this.$el.html(this.template({blog: this.model.toJSON()}));
return this;
},
events: {
"click .submit-blog" : "submitForm"
},
submitForm: function(ev){
}
});
Router:
var blog = new App.Blog();
var blogFormView = App.BlogFormView({model: blog});

You are missing new keyword in router code:
var blogFormView = new App.BlogFormView({model: blog});
Also, it usually isn't best idea to call render inside the initialize method. I personally would just call render inside the router code.

Error in instantiating canjs controller using requirejs

I am using canjs and require js to create a mvc application. I am new to both of them.
I have created a base js class --home.php and loaded jquery, canjs and requirejs in home.php.
I have two separate folders named controller and model
in the model - home_m.js i have the following code
var Description = can.Model.extend({
findAll: 'GET ../webService/ajax/ajax_router.php?q=desc',
create: 'POST ../webService/ajax/ajax_router.php',
update: 'PUT ../webService/ajax/ajax_router.php/{id}',
destroy: 'DELETE ../webService/ajax/ajax_router.php/{id}'
}, {});
In controller i have home_c.js file. The code is as follows
require(['../model/home_m'], function(homeModel){
var Descriptions = can.Control.extend({
'init': function(element, options){
var self = this;
console.log(self);
Description.findAll({}, function(des){
console.log(des);
});
}
});
});
And at last in home.js I have this code
require(['../controller/home_c'], function(m, c) {
new Descriptions('#abc', {});
});
But this gives the error -
What am I doing wrong.
ReferenceError: Descriptions is not defined
If i declare a var a = 5 in the controller/home_c.js and try to alert the value of a in home.js file then its working. Is there any problem with the canjs code?
Thanks

This is not a CanJS problem but more how AMD (and RequireJS works). If you define your models and controls like this:
// models/home_m.js
define(['can/model'], function(Model) {
return Model.extend({
findAll: 'GET ../webService/ajax/ajax_router.php?q=desc',
create: 'POST ../webService/ajax/ajax_router.php',
update: 'PUT ../webService/ajax/ajax_router.php/{id}',
destroy: 'DELETE ../webService/ajax/ajax_router.php/{id}'
}, {});
});
// controller/home_c.js
define(['can/control', '../model/home_m'], function(Control, homeModel){
return Control.extend({
'init': function(element, options){
var self = this;
console.log(self);
Description.findAll({}, function(des){
console.log(des);
});
}
});
});
// home.js
require(['../controller/home_c'], function(Descriptions) {
new Descriptions('#abc', {});
});
Things should work the way they are supposed to.

ember.js Uncaught TypeError: Object data-size has no method 'transitionTo'

I am very new to ember and trying to implement authentication via facebook
I am using ember-facebook.js library to connect with facebook. Once the authentication is successful, I want to transition to some other route e.g. '/index'. This library creates a App.FBUser object in mixin which is populated from the facebook response. The blog say following:
Whenever the user changes (login, logout, app authorization, etc) the method updateFBUser is called, updating the App.FBUser object on your application. You can do whatever you want with this binding, observe it, put it in the DOM, whatever.
Ember.Facebook = Ember.Mixin.create({
FBUser: void 0,
appId: void 0,
fetchPicture: true,
init: function() {
this._super();
return window.FBApp = this;
},
appIdChanged: (function() {
var _this = this;
this.removeObserver('appId');
window.fbAsyncInit = function() {
return _this.fbAsyncInit();
};
return $(function() {
var js;
js = document.createElement('script');
$(js).attr({
id: 'facebook-jssdk',
async: true,
src: "//connect.facebook.net/en_US/all.js"
});
return $('head').append(js);
});
}).observes('appId'),
fbAsyncInit: function() {
var _this = this;
FB.init({
appId: this.get('appId'),
status: true,
cookie: true,
xfbml: true
});
this.set('FBloading', true);
FB.Event.subscribe('auth.authResponseChange', function(response) {
return _this.updateFBUser(response);
});
return FB.getLoginStatus(function(response) {
return _this.updateFBUser(response);
});
},
updateFBUser: function(response) {
console.log("Facebook.updateFBUser: Start");
var _this = this;
if (response.status === 'connected') {
//console.log(_this);
return FB.api('/me', function(user) {
var FBUser;
FBUser = user;
FBUser.accessToken = response.authResponse.accessToken;
if (_this.get('fetchPicture')) {
return FB.api('/me/picture', function(path) {
FBUser.picture = path;
_this.set('FBUser', FBUser);
return _this.set('FBloading', false);
});
} else {
_this.set('FBUser', FBUser);
return _this.set('FBloading', false);
}
});
} else {
this.set('FBUser', false);
return this.set('FBloading', false);
}
}//updateFBUser
});
Update :
Adding following observer in my LoginController, I am able to capture the App.FBUser update event(it is update after getting response from FB; as indicated by the blog).
From this observer method, when I try to 'transitionTo' my index route I get following error
Uncaught TypeError: Object data-size has no method 'transitionTo'. Following is the code
App.LoginController = Ember.Controller.extend({
onSuccess: (function(){
var self = this;
/*
//tried all these method to redirect but error is the same
var attemptedTransition = this.get('attemptedTransition');
attemptedTransition.retry();
*/
/*
//tried all these method to redirect but error is the same
var router = this.get('target.router');
router.transitionTo('index');
*/
//tried all these method to redirect but error is the same
this.transitionToRoute('index');
}).observes('App.FBUser')
});
Index Route
App.AuthenticatedRoute = Ember.Route.extend({
beforeModel: function(transition){
var self = this;
if(!App.FBUser){
self.redirectToLogin(transition);
}
},
redirectToLogin: function(transition){
var loginController = this.controllerFor('login');
loginController.set('attemptedTransition', transition);
this.transitionTo('login');
}
});
I am not able to get my head around it.
Any help is greatly appreciated. Thanks

How can I access this object in my Route.beforeModel() hook.
Depending on what route's beforModel hook you are talking about, this is how you could do it:
App.SomeRoute = Ember.Route.extend({
beforeModel: function(transition) {
if (!Ember.isNone(App.FBUser)) {
// calling 'transitionTo' aborts the transition, redirects to 'index'
this.transitionTo('index');
}
}
});
Update in response to your last comment
The addon you are using is slightly outdated and the proposed implementation method for the mixin in your application will not work with the current version of ember:
App = Ember.Application.create(Ember.Facebook)
App.set('appId', 'yourfacebookappid');
starting from version 1.0.0-rc3 of ember you should rather do it like this:
App = Ember.Application.creatWithMixins(Ember.Facebook);
App.set('appId', 'yourfacebookappid');
After that you should be able to have access to the App.FBUser object as mentioned above.
Update 2
If you want to be able to be notified when some events happend, like login, logout etc. you should (as the Author of the addon states on it's blog post) override the updateFBUser method and do in there your transitions.
Since the addon is trough the mixin available in our App namespace you should be able to do the following:
App = Ember.Application.creatWithMixins(Ember.Facebook, {
updateFBUser: function() {
this._super();
// we are calling super to let the addon
// do it's work but at the same time we get
// notified that something happened, so do at this
// point your transition
}
});
Hope it helps.

As per Issue 1 adding
attributeBindings: [],
to:
return Ember.FacebookView = Ember.View.extend({
solved the issue.

Keep getting undefined

I am working on javascript backbone project. I declared a global object like follow
window.App = { Vent: _.extend({}, Backbone.Events) }
I did above in initialize function like following
initialize: function () {
window.App = { Vent: _.extend({}, Backbone.Events), hello: 'yes' };
console.log(App); // This is ONE. see explanation below for ONE
console.log(App.Vent); // This is TWO. see explanation below
}
ONE
This log line shows following
function (){return parent.apply(this,arguments)} app.js:22
TWO
This log line show
undefined
Also if I do console.log(App.hello) it still says undefined
Please help me what am I doing wrong in this code?
Update
Here is all the related code to my problem. I am using requirejs and backbone
here is my main.js
require(['domReady', 'views/app', 'jqm'], function (domReady, AppView) {
domReady(function () {
window.App = { Vent: _.extend({}, Backbone.Events) };
new AppView();
});
});
here is views/app.js file
define(['backbone', 'views/home/homes', 'collections/homes'], function (Backbone, HomesView, HomesCollection ) {
var App = Backbone.View.extend({
el: 'div#page',
events: {
'swipeleft': 'nextView',
'swiperight': 'preView'
},
nextView: function (e) {
console.log(App.Vent);
//App.Vent.trigger('changeView', { direction: 'next' });
},
preView: function (e) {
console.log(App.Vent);
//App.Vent.trigger('changeView', { direction: 'prev' });
}
});
return App;
});
What I am doing in this file is when user swipes left or right then it calls nextView and preView functions. In these functions I want to trigger and Event which I listen to them in another view. But right now I want to console it. But it says undefined

Try to change:
var App = Backbone.View.extend({
to something else. Like this:
var iApp = Backbone.View.extend({