marionette example not working - backbone.js

I have all the HTML , JS code here on codepen : http://cdpn.io/nbuGB
I started learning marionette JS. Somehow this simple example is not working.
It throws error :
Uncaught TypeError: undefined is not a function
how to resolve this ?

Your problem is in these lines:
ContactManager.reqres.setHandler("contact:entities",function(){
return API.getContactEntities;
});
You need to write API.getContactEntities() otherwise you're returning a function reference instead of your contacts collection. This causes the undefined error.
See: http://codepen.io/anon/pen/jALtq

Related

"Can't read property call of undefined" error on JSBin?

I am trying to learn React using JSBin. I have simple example code BookList and BookInfo (renders items inside BookList).
http://jsbin.com/hoyeroz/2/edit?js,output
I am getting below error in the console:
Uncaught TypeError: Cannot read property 'call' of undefined
Is this a JSBin bug or am I declaring the React components incorrectly?
Your code is proper, and working also, don't know why it is not working on JSBin, because same code is giving proper output on jsfiddle.
check fiddle: https://jsfiddle.net/03Lm3zbv/
Update: After doing some Google search finally got this:
This is a bug with JSBin, and how it handles transpilation with Babel. If you add the pragma //noprotect to the top of your code it will work.
check the working code on JSBin: http://jsbin.com/gedavinodu/edit?html,js,output
There is no explicit bind call here. So what's not bound? Well, if you put this in your compontentDidMount, you'll see that you get the result you are looking for.
this.setState({ books: [{"body": "body text", "name": "the name"}]});
So the ajax call is failing. This seems suspect: $.ajax. It seems to me that the $ is not bound to the jQuery function you think it is.

AngularJS 1.5 error bootstrap IBM Mobilefirst

I seem to have problems combining an MFP hybrid (no cordova) application and angular 1.5. The same application with angular 1.4.9 works fine, but if I switch to angular1.5 then i get this error:
Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
at $$SanitizeUriProvider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:17272:35)
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
at Object.instantiate (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4621:14)
at provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4435:36)
at http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:367:32
at forEach (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:337:20)
at Object.provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4425:9)
at ngModule (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:2476:16)
at Object.invoke (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4606:19)
at runInvokeQueue (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4499:35)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ng&p1=TypeError%3A%…%2FHelloWorld%2Fandroid%2F1.0%2Fdefault%2Fvendor%2Fangular5.js%3A4499%3A35)
anyone a clue what it could be?
I had the exact same problem when I upgraded to angular 1.5.0.
The problem turned out to be with a custom implementation of Function.prototype.bind that we had in our code, it looks like this interfered with the one defined in angular.
Take at the second line on your error callstack
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
I think worklight.js may have an implementation of prototype.bind which is incompatible with the one in angular (see https://code.angularjs.org/1.5.0/docs/api/ng/function/angular.bind)
Also seeing this on the MFP 8.0 cordova plugin.
As others have mentioned, this can be caused by polyfills for Function.prototype.bind. In particular, it seems to be caused by ones that don't properly handle calling the function as a constructor with new. Simple implementations may always return the bound object regardless of invocation, whereas the expectation is that the new operator prevails over the binding and the newly created object gets returned instead.
eg.
// create an object to bind to
var alt = {
message: 'I am the alternate'
};
// our function
function myFunc() {
console.log( this.message );
};
// bind our alternate object to this for myFunc
myFunc.bind( alt );
Standard Invocation Runs as Expected
myFunc(); // output 'I am the alternate'
Invocation via new not as Expected (this is the one that breaks angular 1.5)
new myFunc(); // also outputs 'I am the alternate'</jscodeblock>
The expected behavior is that new invocation will return a new object and not the bound one.
If you need a polyfill for Function.prototype.bind be sure it properly handles this scenario such as the one found on MDN.

controller undefined error while working with custom directives

I am getting the following error when I am trying to run tabs application and is not working. Please find the plunker. Can any one help me to make it work?
Error: enTabsController is undefined
I am using the code from https://github.com/nervgh/angular-tabs with few modifications but some how it is not working.
Your html is wrong.
The end of '' is at a wrong place.
Correct this and then put: require: '^enTabs' in your directives enTabPane and enTab.
<en-tabs data-container="myContainName">
<en-tab data-pane="myPaneName1" >Tab #1</en-tab>
<en-tab data-pane="myPaneName2">Tab #2</en-tab>
<en-tab data-pane="myPaneName3">Tab #3</en-tab>
<en-tab-pane data-name="myPaneName1">
...
</en-tab-pane>
</en-tabs>
See the plunker : http://plnkr.co/edit/sX3kzw?p=preview

Prevent AngularJs from outputting GET error messages to console?

When I write $http.get request, even if I provide an error handling function:
function Ctrl1($scope, $http){
$http.get('www.blahNonexistent.com/api').
success(
function(data){console.log("SUCCESS");}
).
error(
function(data){console.log("ERROR");}
)
}
AngularJs still outputs the error to the console:
Here is a minimal working example on JsFiddle.
Is there any way to prevent this behavior? (I don't want the use the think the site is broken, if one of the API endpoints is down)
That's a native error message and not an angularjs error, therefore I don't think you can "disable"/prevent it.
For example, if you add the following css to your fiddle, you will get the same GET error on the console:
div {
background-image: url("image.png");
}

Uncaught TypeError: Cannot call method 'put' of undefined

I am facing this issue when i am trying to store data in my angular controller page using the $cookieStore. Are there any additional configurations that I have left out ?
function fbLogin($cookieStore){
$cookieStore.put("userid",'12345');
validateUser(userid);
alert(userid);
}
You're not actually defining userId anywhere to JavaScript. You're setting a cookie whose value is userid=12345, but then calling validateUser with an unknown variable, userId which has the undefined value.

Resources