JavascriptMVC Tutorial Issue-Newbie
168 views
Skip to first unread message
ObiWasabi
Oct 23, 2011, 5:40:52 PM10/23/11
to JavaScriptMVC
JavascriptMVC forum is down, so anyway I'm asking a more trusted list.
To the following step, I've placed the code below. I'm feeling around,
so could use some sage advice. Run Cookbook javascriptMVC Cookbook
The following errors are returned in FireFox 7.0.1 error console:
Error: $ is not defined Source File:
http://localhost:8888/cookbook/public/cookbook/models/recipe.js Line:
9
Error: Cookbook.Models is undefined Source File:
http://localhost:8888/cookbook/public/cookbook/recipe/list/list.js
Line: 23
MODEL
/**
* @tag models, home
* Wraps backend recipe services. Enables
* [Cookbook.Models.Recipe.static.findAll retrieving],
* [Cookbook.Models.Recipe.static.update updating],
* [Cookbook.Models.Recipe.static.destroy destroying], and
* [Cookbook.Models.Recipe.static.create creating] recipes.
*/
$.Model.extend('Cookbook.Models.Recipe',
/* @Static */
{
/**
* Retrieves recipes data from your backend services.
* @param {Object} params params that might refine your results.
* @param {Function} success a callback function that returns
wrapped recipe objects.
* @param {Function} error a callback function for an error in the
ajax request.
*/
findAll: function( params, success, error ){
$.ajax({
url: '/recipe',
type: 'get',
dataType: 'json',
data: params,
success: this.callback(['wrapMany',success]),
error: error,
fixture: "//cookbook/fixtures/recipes.json.get" //
calculates the fixture path from the url and type.
});
},
/**
* Updates a recipe's data.
* @param {String} id A unique id representing your recipe.
* @param {Object} attrs Data to update your recipe with.
* @param {Function} success a callback function that indicates a
successful update.
* @param {Function} error a callback that should be called with
an object of errors.
*/
update: function( id, attrs, success, error ){
$.ajax({
url: '/recipes/'+id,
type: 'put',
dataType: 'json',
data: attrs,
success: success,
error: error,
fixture: "-restUpdate" //uses $.fixture.restUpdate for
response.
});
},
/**
* Destroys a recipe's data.
* @param {String} id A unique id representing your recipe.
* @param {Function} success a callback function that indicates a
successful destroy.
* @param {Function} error a callback that should be called with
an object of errors.
*/
destroy: function( id, success, error ){
$.ajax({
url: '/recipes/'+id,
type: 'delete',
dataType: 'json',
success: success,
error: error,
fixture: "-restDestroy" // uses $.fixture.restDestroy for
response.
});
},
/**
* Creates a recipe.
* @param {Object} attrs A recipe's attributes.
* @param {Function} success a callback function that indicates a
successful create. The data that comes back must have an ID property.
* @param {Function} error a callback that should be called with
an object of errors.
*/
create: function( attrs, success, error ){
$.ajax({
url: '/recipes',
type: 'post',
dataType: 'json',
success: success,
error: error,
data: attrs,
fixture: "-restCreate" //uses $.fixture.restCreate for
response.
});
}
},
/* @Prototype */
{});
LIST
steal( 'jquery/controller',
'jquery/view/ejs',
'jquery/controller/view',
'cookbook/models' )
.then( './views/init.ejs',
'./views/recipe.ejs',
function($){
/**
* @class Cookbook.Recipe.List
* @parent index
* @inherits jQuery.Controller
* Lists recipes and lets you destroy them.
*/
$.Controller('Cookbook.Recipe.List',
/** @Static */
{
defaults : {}
},
/** @Prototype */
{
init : function(){
this.element.html(this.view('init',Cookbook.Models.Recipe.findAll()) )
},
'.destroy click': function( el ){
if(confirm("Are you sure you want to destroy?")){
el.closest('.recipe').model().destroy();
}
},
"{Cookbook.Models.Recipe} destroyed" : function(Recipe, ev,
recipe) {
recipe.elements(this.element).remove();
},
"{Cookbook.Models.Recipe} created" : function(Recipe, ev, recipe){
this.element.append(this.view('init', [recipe]))
},
"{Cookbook.Models.Recipe} updated" : function(Recipe, ev, recipe){
recipe.elements(this.element)
.html(this.view('recipe', recipe) );
}
});
});
cookbook.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Cookbook</title>
</head>
<body>
<h1>Welcome to JavaScriptMVC 3.2!</h1>
<ul id='recipes'></ul>
<form id='create' action=''></form>
<script type='text/javascript' src='../steal/steal.js?
cookbook'></script>
</body>
</html>
To the following step, I've placed the code below. I'm feeling around,
so could use some sage advice. Run Cookbook javascriptMVC Cookbook
The following errors are returned in FireFox 7.0.1 error console:
Error: $ is not defined Source File:
http://localhost:8888/cookbook/public/cookbook/models/recipe.js Line:
9
Error: Cookbook.Models is undefined Source File:
http://localhost:8888/cookbook/public/cookbook/recipe/list/list.js
Line: 23
MODEL
/**
* @tag models, home
* Wraps backend recipe services. Enables
* [Cookbook.Models.Recipe.static.findAll retrieving],
* [Cookbook.Models.Recipe.static.update updating],
* [Cookbook.Models.Recipe.static.destroy destroying], and
* [Cookbook.Models.Recipe.static.create creating] recipes.
*/
$.Model.extend('Cookbook.Models.Recipe',
/* @Static */
{
/**
* Retrieves recipes data from your backend services.
* @param {Object} params params that might refine your results.
* @param {Function} success a callback function that returns
wrapped recipe objects.
* @param {Function} error a callback function for an error in the
ajax request.
*/
findAll: function( params, success, error ){
$.ajax({
url: '/recipe',
type: 'get',
dataType: 'json',
data: params,
success: this.callback(['wrapMany',success]),
error: error,
fixture: "//cookbook/fixtures/recipes.json.get" //
calculates the fixture path from the url and type.
});
},
/**
* Updates a recipe's data.
* @param {String} id A unique id representing your recipe.
* @param {Object} attrs Data to update your recipe with.
* @param {Function} success a callback function that indicates a
successful update.
* @param {Function} error a callback that should be called with
an object of errors.
*/
update: function( id, attrs, success, error ){
$.ajax({
url: '/recipes/'+id,
type: 'put',
dataType: 'json',
data: attrs,
success: success,
error: error,
fixture: "-restUpdate" //uses $.fixture.restUpdate for
response.
});
},
/**
* Destroys a recipe's data.
* @param {String} id A unique id representing your recipe.
* @param {Function} success a callback function that indicates a
successful destroy.
* @param {Function} error a callback that should be called with
an object of errors.
*/
destroy: function( id, success, error ){
$.ajax({
url: '/recipes/'+id,
type: 'delete',
dataType: 'json',
success: success,
error: error,
fixture: "-restDestroy" // uses $.fixture.restDestroy for
response.
});
},
/**
* Creates a recipe.
* @param {Object} attrs A recipe's attributes.
* @param {Function} success a callback function that indicates a
successful create. The data that comes back must have an ID property.
* @param {Function} error a callback that should be called with
an object of errors.
*/
create: function( attrs, success, error ){
$.ajax({
url: '/recipes',
type: 'post',
dataType: 'json',
success: success,
error: error,
data: attrs,
fixture: "-restCreate" //uses $.fixture.restCreate for
response.
});
}
},
/* @Prototype */
{});
LIST
steal( 'jquery/controller',
'jquery/view/ejs',
'jquery/controller/view',
'cookbook/models' )
.then( './views/init.ejs',
'./views/recipe.ejs',
function($){
/**
* @class Cookbook.Recipe.List
* @parent index
* @inherits jQuery.Controller
* Lists recipes and lets you destroy them.
*/
$.Controller('Cookbook.Recipe.List',
/** @Static */
{
defaults : {}
},
/** @Prototype */
{
init : function(){
this.element.html(this.view('init',Cookbook.Models.Recipe.findAll()) )
},
'.destroy click': function( el ){
if(confirm("Are you sure you want to destroy?")){
el.closest('.recipe').model().destroy();
}
},
"{Cookbook.Models.Recipe} destroyed" : function(Recipe, ev,
recipe) {
recipe.elements(this.element).remove();
},
"{Cookbook.Models.Recipe} created" : function(Recipe, ev, recipe){
this.element.append(this.view('init', [recipe]))
},
"{Cookbook.Models.Recipe} updated" : function(Recipe, ev, recipe){
recipe.elements(this.element)
.html(this.view('recipe', recipe) );
}
});
});
cookbook.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Cookbook</title>
</head>
<body>
<h1>Welcome to JavaScriptMVC 3.2!</h1>
<ul id='recipes'></ul>
<form id='create' action=''></form>
<script type='text/javascript' src='../steal/steal.js?
cookbook'></script>
</body>
</html>
Brian Moschel
Oct 23, 2011, 6:00:46 PM10/23/11
to JavaScriptMVC
Reply all
Reply to author
Forward
0 new messages