I'm building a new Ng 1 project using Breeze. I need to add client-side properties to some entities. I added a constructor, but it does not get called. I added a post initializer, it is not called either.
// a convention can self-register as the default
breeze.NamingConvention.camelCase.setAsDefault();
// create a manager to execute queries
service.manager = new breeze.EntityManager("/api/pts");
// access to the manager's store to add custom client-side properties ..
service.metastore = service.manager.metadataStore;
// entities with client-side properties ..
service.metastore.registerEntityTypeCtor('PtsWine__Pts_BreezeModel', PtsWine, ptsWineInitializer);
var PtsWine = function () {
debugger;
this.uiDayUid = 0;
}
var ptsWineInitializer = function (pw) {
debugger;
pw.uiDayUid = 0;
}
var query = new service.EntityQuery().from("Wines");
return service.manager.executeQuery(query)
.then(function (d) {
debugger;
/// ??? examining d.results shows 40 PtsWine__Pts_BreezeModel entities but
/// constructor and initializer above were never invoked .. ???
})
.fail(function (response) {
toastr.error("Server Error: failed to retrieve listing.")
});
The initialization sequence does not seem correct to me. At the time registerEntityTypeCtor is executed PtsWine and ptsWineInitializer are undefined. Remember javascript hoisting concept? https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
You need to define the variable before calling registerEntityTypeCtor.
Related
I'm confused as to how exactly to update a resource using $save. I've read the angular resource documentation and looked at other posts on stack overflow but I cannot seem to perform an update operation on an existing object.
For example, I have an event object and I want to update its name and location properties. I have the start of a function that correctly takes in the eventId of a singular event.
Here is the function so far:
eventService.updateEvent = function (eventId, eventName, eventLocation) {
// Defines the resource (WORKS)
var Event = $resource('/api/events/:id/', {id:'#_id'});
// Gets the event we're talking about (WORKS)
var event = Event.get({'id': eventId});
// TODO update event
};
How do i successfully update this resource?
Figured it out!
When I defined the resource, I defined the PUT operation as a custom method called 'update'.
I called get on that resource and looked up a particular object by ID.
Using a promise, I was able to update the resource using the 'update method' if the object was found, else throw an error.
eventService.updateEvent = function (eventId,eventName,eventLocation) {
// Define the event resource, adding an update method
var Event = $resource('/api/events/:id/', {id:'#_id'},
{
update:
{
method: 'PUT'
}
});
// Use get method to get the specific object by ID
// If object found, update. Else throw error
Event.get({'id': eventId}).$promise.then(function(res) {
// Success (object was found)
// Set event equal to the response
var e = res;
// Pass in the information that needs to be updated
e.name = eventName;
e.location = eventLocation;
// Update the resource using the custom method we created
Event.update(e)
}, function(errResponse) {
// Failure, throw error (object not found)
alert('event not found');
});
};
Folks: Creating an app in angular and node webkit - where users queue up files for downloading, navigate to their dashboard view and this initiates the downloads.
I've created a service which holds an object of the files data:
..
var downloadObj = {};
// fileObj = {'name':'The file name'; 'download_progress' : dlProgress}
showcaseFactory.myDownloads = function(eventId, fileObj) {
if(eventId){
console.log('update the object');
downloadObj['event_'+eventId] = fileObj;
}
console.log(downloadObj);
};
showcaseFactory.getDownloads = function() {
return downloadObj;
};
..
When the dashboard view loads - ng-repeat loops over $scope.downloadFiles which references this object returning the data.
<div ng-repeat="file in downloadFiles">
<div><span>{{file.name}}</span> [{{file.download_progress}}%]</div>
</div>
I've created a custom module which utilises node_modules to perform the download of the files:
nwjsDownloadFactory.commenceDownload = function(event_id, url, dest, cb) {
var http = require('http');
var fs = require('fs');
var statusBar = require('status-bar');
var path = require('path');
// THIS UPDATES THE OBJECT AND DISPLAYS FINE --------- >>
var id = 7;
var testFileObj = {
'name' : 'This is the file name prior to the download...',
'download_progress' : 10
};
ShowCase.myDownloads(id, testFileObj);
// <<< THIS UPDATES THE OBJECT AND DISPLAYS FINE ---------
var file = fs.createWriteStream(dest);
var request = http.get(url, function(response) {
response.pipe(file);
file.on('finish', function() {
file.close(cb); // close() is async, call cb after close completes.
});
bar = statusBar.create({ total: response.headers['content-length'] })
.on('render', function (stats) {
// var percentage = this.format.percentage(stats.percentage);
// console.log(event_id + '....' + percentage);
var id = 7;
var testFileObj = {
'name' : 'This is the new file name during the download...',
'download_progress' : 35 // this will be replaced with percentage
};
ShowCase.myDownloads(id, testFileObj);
});
response.pipe(bar);
}).on('error', function(err) { // Handle errors
fs.unlink(dest); // Delete the file async. (But we don't check the result)
if (cb) cb(err.message);
});
}
QUESTION: Prior to the line var request = http.get(url, function(response) the object gets updated, and the changes are reflected in the UI. However, I need to constantly update the object with download complete % so I can create a progress bar.. However, as this asynchronous function executes, the object
appears to be updating - see the attached screen shot - but the UI is not reflecting this.
Can somebody please steer me in the right direction - I need the object to update during the function bar = statusBar.create({ and for the changes to reflect in the UI..
Call $scope.$apply() after making changes to your model to notify Angular that it has to update the UI.
showcaseFactory.myDownloads = function(eventId, fileObj) {
if(eventId){
console.log('update the object');
downloadObj['event_'+eventId] = fileObj;
$scope.$apply();
}
console.log(downloadObj);
};
If you use Angular's $http object, this is handled automatically for you, but if you update your model from other asynchronous callbacks, you have to take care of it yourself.
See this blog post and this documentation page for more in-depth explanations about what's going on.
I'm trying to create a Parse object in an app using the Ionic Framework, and I can't get it to work. I'm fairly new to programming, but I've been able to create Parse users, just not objects. Can anyone help me find a solution? Please see the code below for my controller in question. Thanks!
.controller('AddProspectsController', function($scope, $state, $rootScope) {
if (!$rootScope.isLoggedIn) {
$state.go('welcome');
}
$scope.prospect = {};
$scope.error = {};
// Syntax to create a new subclass of Parse.Object.
//var Prospects = Parse.Object.extend("Prospects");
$scope.addProspect = function() {
// Create a new instance of that class.
var Prospects = Parse.Objext.extend("Prospects");
var prospects = new Prospects();
prospect.set("name", $scope.prospect.name);
prospect.set("phone", $scope.prospect.phone);
prospect.set("email", $scope.prospect.email);
prospect.set("interest", $scope.prospet.interest);
prospect.save(null, {
success: function(prospect) {
// Execute any logic that should take place after the object is saved.
$state.go('app.prospects', {clear: true});
alert('New object created with objectId: ' + prospect.id);
},
error: function(prospect, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and message.
alert('Failed to create new object, with error code: ' + error.prospect);
}
});
}
})
You have another spelling error on this line:
var Prospects = Parse.Objext.extend("Prospects");
This is not Objext, but Object.
I hope this will help.
There is a spelling error... you have the variable named prospects with an "s" and when you are creating the object, you are using a variable named prospect
Last few days I am working to invoke REST services and track the response, error, callback etc. I have gone through most of the posting however due to my limited understanding on Angular seems like I am not able to understand it. Following is my problem and understanding I got so far.
I am using Project.$update() service which returns only "project_id". This server doesn't return complete data again. Following is line of few line of code to share here.
//create Project factory
app.factory('Project', function ($resource) {
return $resource('/api/projects/:projectid',
{projectid:'#id'},
{update: {method:'PUT', isArray:false}}
);
});
Following is code in directive I am using to update/create project.
//save project
scope.saveProject = function (project) {
//update modified by field
project.modifiedby = scope.user._id;
//change to view mode
scope.projectView = 1;
//call server to save the data
if (project._id == undefined || project._id == "") {
//Call server to create new and update projectID
project._id = project.$save()._id;
}
else {
//Call server to update the project data
project.$update({ projectid: project._id });
}
};
Following is service response for both save() and update().
{"_id":"52223481e4b0c4d1a050c25e"}
Problem here is; "project" object value is replaced by new response returned by server having only project_id and other fields are replaced.
I was going through detailed documentation on $resource however I am not able to grasp it. It will be great to get some guidance here to write code to detect error, response, callback.
You can replace the original object by the one returned from the server in your success callback like this:
//save project
scope.saveProject = function (project) {
//update modified by field
project.modifiedby = scope.user._id;
//change to view mode
scope.projectView = 1;
//call server to save the data
if (project._id == undefined || project._id == "") {
//Call server to create new and update projectID
project.$save(function(updatedProject, headers){
// Replace project by project returned by server
project = updatedProject;
});
}
else {
//Call server to update the project data
project.$update(function(updatedProject, headers){
// Replace project by project returned by server
project = updatedProject;
});
}
};
That will replace the original object by the one returned by the server as soon as the server response is received.
If your callback is identical for the $save and $update methods, you can further simplify your code like this:
//save project
scope.saveProject = function (project) {
//update modified by field
project.modifiedby = scope.user._id;
//change to view mode
scope.projectView = 1;
var action = (angular.isDefined(project._id)) ? '$update' : '$save';
//call server to save the data
project[action](function(updatedProject, headers){
// Replace project by project returned by server
project = updatedProject;
});
};
Hope that helps!
As per suggestion made by jvandemo and BoxerBucks; I have used following approach for save/update by passing the callback method with copy of original data. However still I am looking for central approach to take care of error/success status. Please suggest.
//save project metadta
scope.saveProjectMetadta = function (project) {
//update modified by field
project.modifiedby = scope.user._id;
//change to view mode
scope.projectView = 1;
//keep original data to pass into callback
var originalProjectObject = angular.copy(project);
//call server to save the data
if (project._id == undefined || project._id == "") {
//Call server to create new and update projectID
project.$save(originalProjectObject, function (projectResponse) {
originalProjectObject._id = projectResponse._id;
//update scope
scope.project = originalProjectObject;
//invoke method to update controller project object state
scope.updateProjectScope(scope.project);
});
}
else {
//Call server to update the project data
project.$update({ projectid: project._id }, function (projectResponse) {
originalProjectObject._id = projectResponse._id;
//update scope
scope.project = originalProjectObject;
//invoke method to update controller project object state
scope.updateProjectScope(scope.project);
},originalProjectObject);
}
};
Adding Backbone to a Rails app, I created a post model inside an app namespace like this
var app = {
this.models.post = new app.Models.Post();
In the router, I created the following route
"posts/:id": "postDetails"
When I navigate to /posts/4, I'm getting an Uncaught TypeError: object is not a function error when I try to call fetch on the model like this
postDetails: function (id) {
console.log(id);
var post = new app.models.post({id: id});
this.post.fetch({
success: function (data) {
$('#content').html(new PostView({model: data}).render().el);
}
});
}
According to the Backbone docs http://backbonejs.org/#Model-fetch, I should be able to call fetch on a model to retrieve the data from the server. Why does Backbone think I'm treating an object like a function?
You're doing this:
this.models.post = new app.Models.Post();
to, presumably, set app.models.post to an instance of the app.Models.Post model. Then you try to do this:
var post = new app.models.post({id: id});
But you can only use the new operator on a function:
new constructor[([arguments])]
Parameters
constructor
A function that specifies the type of the object instance.
You probably want to say:
var post = new app.Models.Post({ id: id });
or something similar.
The problem is you've declared post as a local variable var post, but then tried to access it as a member this.post. You need either this:
this.post = new app.models.post({id: id});
this.post.fetch({ ...
Or this:
var post = new app.models.post({id: id});
post.fetch({ ...
(The difference being that a local variable var post is declared in transient scope and thrown away after postDetails completes; while instance variable this.post gets added to the Router object and will typically live for the whole lifetime of the application.)