javascriptejscanjs

undefined is not a function in canjs

I am trying to fetch data from the json array using canjs in html file with ejs template engine.

But when I load the html file on browser It shows the error that "Undefined is not a function".

This is my todo.js

var Todo = can.Model({
	findall : 'GET/todos',
	findone : 'GET/todos{id}',
	create  : 'POST/todos',
	update  : 'PUT/todos/{id}',
	remove  : 'DELETE/todos/{id}'

},{})

(function(){
	var TODOS =  [{id: 1,name : 'Dipesh'},
	        	  {id: 2,name : 'John'},
	        	  {id: 3,name : 'Joseph'}];

	    can.fixture("DELETE/todos/{id}",function(request){
	    	return {};
	    });
	    can.fixture("PUT/todos/{id)", function(request){
	    	$.extend(TODOS[(+request.data.id)-1], request.data);
	    	return {};
	    });
	    can.fixture("POST/todos", function(request){
	    	var id = TODOS.length + 1;
	    	TODOS.push($.extend({id:id},request.data));
	    	return {id:id, name: request.data};
	    });
		can.fixture("GET/todos", function(request){
			return TODOS;
		});
		can.fixture("GET/todos/{id}", function(request){
			return TODOS[(+request.data.id)-1];
		});
})();

Todo.findall({}, function(todos){
	var frag = can.view('todosEJS', todos)
	document.getElementById("todos")
	   .appendChild(frag);
})

This is my html file:

<html>
<head>
	<title>Canjs </title>
</head>
<body>
<ul id = 'todos'></ul>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src='../can.custom.js' type="text/javascript"></script>
<script src='todos.js' type="text/javascript"></script>

<script id = 'todosEJS' type = 'text/ejs'>
	<% for(var i = 0;i<this.length;i++){%>
		<li><%=this[i].name%></li>
	<% } %>

</script>
</body>
</html>

Its showing an error at line Todo.findall({}, function(todos){ as "undefined is not a function". Anybody have a solution?

Solution

  • Couple of things:

    Here's your example working on jsbin: http://jsbin.com/waqihidajo/1/edit