I'm using https://github.com/sahat/hackathon-starter/tree/es6 which leverages Jade in an ExpressJS & MongoDB NodeJS environment. My questions is how can I update #{event.location} && #{event.city} in Front-end if they change inside MongoDB in the back-end?
I do not want to refresh the entire website in order for #{event.location} and #{event.city} to be updated in the front-end.
Could someone please explain how to do this or if there is a better way of achieving this? Maybe with Socket.IO or some other way. I'm fairly new to Node, JS, Jade etc and can't even grasp a decent way of refreshing part of the page with JADE....
Thank you in advance for your help ! Kudos
Express/Jade can only render the page once from backend when the HTTP request comes.
If you have to update the data on frontend, you will have to use different strategy depending on how your data is updated.
If your data in the backend is updated via the same frontend or at known time you can use AJAX calls to server and fetch the values intermittently.
If data is updated via a different channel then socket.io would be the way to go. You can emit events from the backend on data change and receive the events on frontend app and update the data fields only using javascript bindings.
If you have too many manipulations of data to be done I would suggest using a frontend framework from the likes of Angular or Meteor.
Related
I am asking this because I don't know if it's possible and don't know the terms to label this.
I have a VueJS crud app that grabs data from an API backend, and then renders it in great HTML. Thanks JavaScript, and V8 since I use Chrome.
Now, I'd like to send someone an HTML email with a snippet of the table embedded. That is a backend process. But I obviously don't want to rewrite the VueJS HTML on the backend or in another place.
Is there any way, from the backend only, to call the VueJS coding and grab the HTML, or an innerHTML section, as if I'd called it on the front end?
The answer to this is to use NodeJS and perform Server Side Rendering
This will require using the render method in VueJS which is different than what my CRUD application is written in.
Also as discussed in the link above, reactivity doesn't exist on the server side.
And in addition, the actual data that would be listed in a table needs to be pre-fetched.
Here's the view that updates the timestamp of a model in database whenever it's called,
def data(request):
new = Data.objects.filter(user=request.user)
new.update(timestamp=timezone.now())
return HttpResponse('')
This view is related to this URL,
url(r'^go/$', views.data, name='data')
Everything is fine, but how can I call this view & update the database without refreshing the page?
This is a great question as its something that may not seem as logical in django as say node or js based server and client interactions. Let me give a generic response then go more detailed.
Django is a web server. It has some newer functionality that allows it to more easily interact with javascript than it could in the past, but it is normally used in conjunction with a javascript framework. I'll normally build a django app w/ django-rest-framework and reactjs. So my workflow is normally to build the datamodel, serve up the page with compiled js as a static asset, and have those two communicate via a rest-api stood up with DRF.
Specifically to your question, you can simply have your django model communicate with the server via ajax posting to endpoint in your app. An example of a jquery/ajax post is available at this link. The only other thing you will want to look into is supporting csrf which Django discusses in the docs.
Let me know if this helps. If it does but requires specific snippets, let me know.
I have an Epress JS rest api that posts values to the mongoDB. I'm wondering if it is possible to integrate Meteor JS to retrieve those values from the MongoDB.
Any thoughts would be appreciated.
Thanks
Meteor's data layer connects to MongoDB, use a normal publish on the server and subscribe from the client. https://www.meteor.com/tutorials/blaze/collections
It won't matter that your Express app updates the db independently - Meteor's reactivity will pick up the changes as they happen.
In meteor for creating REST-API the first choice would be a publish-subscribe call but if you need to make REST-API beyond that you can use 'Restivus' high-level API.
Here is the link
Ok, so basically what is happening is I have a search input on my index page. The user types something in the search input, and that is sent to the Django REST api which returns the data in JSON format. I can loop through that results array using Angular ng-repeat. But my question is: is there a way to send that request to another django view and have django return the values using a for loop and a template that I already created?
( I am trying to avoid recreating the template specifically for Angular because that would be repetitive)
Any suggestions, or help on this comes much appreciated. Thank you in advance for taking the time to help me.
All the best.
It depends on the architecture of your application.
If you are building your client as a single page web application using Angular & your business logic is served using the Django REST API in JSON/XML format. Then rendering of the view should be the responsibility of the client side code.
As per me whatever you are doing looks perfectly okay. I don't see any redundancy of the templates in this architecture.
I'm currently working on a meteor-Application where I want to use the list.js-JavaScript Library with Meteor.
The use-Case is that I have some data in my MongoDB on the server which I publish to the client. This data should now be rendered in a list and list.js should make it searchable.
The data is published to the client (after a short delay I get the data in the view). But it seems that the list.js-Library is run before the data hits the client. The console says that the array which is searchable only consists of "undefined".
What I've tried now is to use Template.rendered where I put my code of list.js in. But Template.rendered gets fired when the template is rendered, not when the data is receiving the client.
It seems that the data arrives too late to be grabbed by list.js.
Is there something I can do so that list.js will start when the data successfully arrived at the client? Is there something like Data.received?
Thanks in advance!
Unfortunately, that is not the meteor-way to do it. Once you get it working you will see that it lacks performance and proper reactivity.
You should instead look into using meteor's excellent reactivity and do it using template helpers, that way it will be reactive and you can scale it without performance issues.
I found a good answer to your question in the Unofficial Meteor FAQ
That describes how to know when your subscription is ready (reactive data).