I have this little issue. I have a service that has a Subscription option. When an item in the DataBase is modified (i.e. customer order), I want the customer to see the change in real-time.
Once the user logs in, he is automatically subscribed to his order's status (or several orders, as the case may be). When the status changes, the service sends a POST to a URL that I designate and when that is done, I want to change the client's order status, however I have no idea how to modify Angular's model in order to change what the user sees.
module.exports = function (app) {
app.route('/api/machine')
.post(function (req, res) {
console.log(JSON.stringify(req.body));
return res.send("post returned " + JSON.stringify(req.body));
})
};
At the moment, I get the updates from the Service and print them out, but how do I update the view as well?
try use $watch() function.. when the value is modified, the view is updated.
$scope.$watch(function(scope) { return scope.data.myVar },
function(newValue, oldValue) {
document.getElementById("").innerHTML =
"" + newValue + "";
}
);
I dont know how you've constructed this project's structure, but if you're using a API, use http post to notify your front when changes are done.
the digest or watch, will make your controller do a function always the value has changed.
Angular Digest,Watch and Apply docs.
i hope this helps.
cya.
Related
in the doc it's written that you can sends event to all connected users by using the following server side code for an update event
function backandCallback(userInput, dbRow, parameters, userProfile)
{
socket.emitAll("items_updated", userInput);
}
then in your angular client code, you can listen for this event by doing the following
Backand.on('items_updated', function (data) {
//Get the 'items' object that have changed
console.log(data);
});
i'm working with anonymous users, i can't use emitUsers or emitRoles to restrict to only concerned users.
As i don't want all anonymous users to receive all update events but only the ones for the item they are on (stupid to listen for updates you don't care isn't it!),
would there be a way to only listen for events on a specific item?
thanks for your help
In fact i've found the solution thanks to Backand brilliant support team (thanks Itay!).
The solution is quite simple, you can play with the event name string !
back to my example, let's say i only want the user listen for changes on the item he is actually viewing (item id is 57 for example), the code then will be:
- on the server code side
function backandCallback(userInput, dbRow, parameters, userProfile)
{
//if the updated item has an id=57 for example,
//the event emitted will be "items_updated_57"
socket.emitAll("item_updated_" + dbRow.id, userInput);
}
- on the angular client code
//currentItem id
var itemId=57;
Backand.on('item_updated_'+ itemId, function (data) {
//will be triggered when we receive an event named
// "item_updated_57"
console.log(data);
});
I have the following publisher and subscriber code.
It works for the first time when the app starts, but when I try to insert data directly into the Mongo database, it will not automatically update the user screen or I don't see the alert popping.
Am I missing something?
Publish
Meteor.publish('userConnections', function(){
if(!this.userId){
return;
}
return Connections.find({userId: this.userId});
})
Subscribe
$scope.$meteorSubscribe('userConnections').then(function () {
var userContacts = $scope.$meteorCollection(Connections);
alert("subscriber userConnections is called");
if (userContacts && userContacts[0]) {
....
}
}, false);
First off, if you are not using angular-meteor 1.3 you should be. The API has changed a lot. $meteorSubscribe has been deprecated!
To directly answer your question, $meteorSubscribe is a promise that gets resolved (only once) when the subscription is ready. So, it will only ever be called once. If you look at the documentation for subscribe you'll see how to make the binding "reactive", by assigning it to a scope variable. In your case it would be something like:
$scope.userContacts = $scope.$meteorCollection(Connections);
Doing it this way, when the collection gets updated, the $scope.userContacts should get updated as well.
I have a case that I want to update the ui based on the user so if a user was log-out and log-in as different user, a score of the user in the ui is changed. The way I thought about doing it is by looking at $rootScope.currentUser.
from my testing it seems like there is some kind of access to the $rootScope, but it is not getting updated on user change (unless I have a bug in my code). here is the relevant code:
$meteor.autorun($scope, function() {
if (null !== $rootScope.currentUser) {
$scope.userForScore = $scope.$meteorObject(Userinfo, {user_id: $scope.getReactively('currentUser')._id});//$rootScope.currentUser._id
}
});
$scope.userScore = function(){
if ($scope.userForScore === undefined || $scope.userForScore.score === undefined) {
return 1;
}
return $scope.userForScore.score;
};
Userinfo - is a collection I created in the server.
Yes it is possible and it works exactly like you did it.
Your problem was unrelated to getReactively, I've created a pull request to your repo to fix it:
https://github.com/Urigo/angular-meteor/issues/415#issuecomment-113925910
You can use Meteor.user() which is a reactive var. No need to add an additional layer of watchers.
I am implementing a notification system using angularjs and meteor.
In my publication code,
I have something like this:
var retVal = Notifications.find({recipient: userId});
var handle = retVal.observeChanges({
//when a new notification is added
added: function (doc, idx) {
count++;
if (!initializing){
console.log("A record was added");
self.changed("counts", userId, {count: count});
}
},
removed: function (doc, idx) {
count--;
self.changed("counts", userId, {count: count});
}
});
and in the end I return retVal.
In my controller, I subscribe to that publication.
The code seems fine and the server triggers the added function whenever a new document is added. But how do I notify the client (something like trigger a function in my controller) when a new document is added? The added function only triggers in the server.
I can't see your publication header, do you expect parameters there?
For binding a collection all you need to do is use the $meteorCollection service like that:
$scope.notifications = $meteorCollection(Notifications);
We just updated our API (version 0.6.0-alpha) and it does observeChanges internally to look for any change in the collection.
But don't forget to subscribe to that collection - you can do that in 2 ways:
$meteorSubscribe.subscribe("publicationName", parameters) - which returns a promise.
$scope.notifications = $meteorCollection(Notification).subscribe("publicationName", parameters); - which is shorter but doesn't return a promise.
If one of the parameters changes the publication, you should surround it with autorun like that:
$meteorUtils.autorun($scope, function(){
$meteorSubscribe.subscribe("publicationName", {
limit: parseInt($scope.getReactively('perPage')),
skip: (parseInt($scope.getReactively('page')) - 1) * parseInt($scope.getReactively('perPage')),
sort: $scope.getReactively('sort')
}));
});
$scope.getReactively is a new method we added that makes a regular $scope variable to a reactive one. this means that when it changes, that autorun will re-run.
Hope it helps, let me know how can I improve the answer and the documentation.
I think that you should replicate your observeChanges() on the client.
So, it will be able to observe the client side collection that is created and synchronized by the subscribe() function.
This may be more of a question around design pattern - I hope it makes sense.
I am using backbone - am developing a relatively simple app where user can add requests (where the request model is simply heading, description and price). The only requirement to add the requests is that a user is 'logged in'.
However I wish that the user 'adds' the request before checking if the user is logged in (remove one barrier). By that I mean that the user fills the form in, if not registered they have to register and then the request is just sent, if they were logged in it would just be sent. So initially the 'add request' view is rendered, when save is triggered this will call the save on the model which calls the ajax request on the server. The response will either return true (the user was logged in and the request added) or false (the user was not logged in).
So assuming that the user was not logged in - then I would wish to render a new view 'register' which has the option for the user to switch to 'login' (another view). So User in theory could go from
Request (save) -> Register -> Login -> Request (save)
So presuming that the user then registered (filled in the form which then called the registers view save method which then called the registers model save and returned ok). I would then wish to once again call the 'request' save method once again (as now the user would be logged in). However I do not want the register/login tied to the Request view - as in theory a new view (lets say I had a sent message view) would want similar functionality e.g. try and make the request, if failed switch view to register - perform save and then call some callback.
So the question is what is the right way to do this?
1) Do I create some closure inside the request view referencing the 'save' function and store it in a global to be called by register/login onsuccess?
2) Create a closure as above and pass that to the register etc (and if so how would I pass this given register/login is a view).
3) Pass a reference to 'this' of the request view?
So far all I have is, so in the else I would render the 'register' view but would love to know best way to do this without it getting very ugly?
save : function(event){
if(this.model.isValid() == true) {
this.$("#general_error").hide();
this.model.set({'formattedPrice' : TB_H.formatPrice(this.model.get('currency'), this.model.get('price'))});
self = this;
this.model.save(this.model.toJSON(), {
success: function(m, y) {
if(y.status == true) {
self.model = new TB_BB.Request();
Backbone.ModelBinding.bind(self);
Backbone.Validation.bind(self);
$('#add-offer-button').show();
} else {
if(y.errors[0] == 'not logged in') {
this.$("#general_error").html('You are not logged in');
this.$("#general_error").show();
} else {
_.each(y.errors, function(key, val) { this.$("#general_error").html(key) });
this.$("#general_error").show();
}
}
}, error : function(m,y) {
this.$("#general_error").show();
this.$("#general_error").html("Something bad happened - please try again")
}
}
);
}
Greatly appreciate any help!
I noticed this after asking a similar question, which I just deleted. I'm thinking this isn't the way most people are doing it in backbone.
what I did instead was pass my different routes to the same method and if the ids were not null, I'd call the route.
So I have a view
base_view = Backbone.Views.extend({
initialize: function(id,a_id,b_id){
this.id = id;
this.a_id = a_id;
this.b_id = b_id;
Myapp.data = new Myapp.Model.Base();
Myapp.data.url = '/data_url/'+id;
Myapp.data.fetch(Myapp.data, {
success: function(response){
// i have some nested collections, and models so i fill those in here
Myapp.mainModel = new First_Child_Collection(response.attributes.first_child_array);
}, error: function(){
alert('oops couldn't get data');
}
});
Myapp.data.bind("fetched",this.render,this);
},
render: function(){
new Main_View();
new Sub_View_1(this.id);
new Sub_View_2(this.a_id);
new Sub_View_3(this.b_id);
}
});
Then in my routes, rather than having a new route for each, I have
routes: {
"app/new": "new",
"app/:id/edit/a/:a_id/b/:b_id": "edit"
}
edit {
new base_view(id,a_id,b_id);
}
I'm not sure if this is perfect, but I think it is DRY'r than the other options. I just check that a_id or b_id are not undefined before passing those views.
Hope it helps.