I'm having some difficulty figuring out how to integrate websockets with my ember js app. I don't know how to emulate websocket behavior in jsbin, so here's the nonfunctional example --
http://jsbin.com/iFUZoza/1/edit
Imagine this working up to the point where I log "finding..." (It does. I get the object I'm looking for from the socket.) Unfortunately from there, I'm not sure how to get the contact model in question out of Ember. Basically, I've listed all of the contacts in the UI, and I want to retrieve a single model from the controller and update it in real time. I've got as far as getting the sockets functional, but I don't know how to get that model back. I'm not even sure if I've inserted the socket code at the right place to do this. Can someone help or point me in the right direction?
Thanks.
I believe the route its a good place to create the socket connection and the controllers are the place to react according to what happened in the socket.
I'd do something that resembles this JSBin:
http://jsbin.com/iFUZoza/4/edit?js,output
Hope this helps you!
Related
I has a site based on Ember.js. This site has a textarea where models' field message is set. When user changes this field I make model.save(). Everything is ok but one thing: if I write something while save API request is not finished, text will be flushed to the version been saved to server.
How to explain to Ember that I want to use client version of this field, not server version?
Sorry for my english :(
I think ember-changeset would solve that.
Check this video out in emberscreencasts, it is a good explanation of what the problem it solves and how it works: https://www.emberscreencasts.com/posts/168-introduction-to-ember-changeset
I've been learning Django for some time now, and I found this image helpful:
I'm now delving into Angular JS, and I'm trying to figure out how each of the components (Directives, Controllers and Services ?) interacts and if there is a similar 'cycle'. This blog looks like it comes close to answering my question.
But how is the picture different if we have a Django-Rest-Framework end point providing the books in the above example?
Do we want URL resolution from Django, or Angular? Or more answerabley, which takes precedent?
What is the general order that things happen in when we go to say localhost:8000/books ?
Does urls.py catch this?
urls(r'^books',angular_redirect)
If so what does that function (angular_redirect) need to render to get angular to respond?
Does angular routing catch this?
$routeProvider.when('/books', {templateUrl: 'partials/book_partial.html', controller: 'MyBookCtrl'});
So does this mean my controller then registers a service hooked up to say localhost:8000:/book_list.json and does that need to be registered in the urls.py?
How does Angular know where to get the DRF JSON, if we're wholly relying on angular for routing. I've seen this package that lets you use the django models in the angular JS, but I'm not certain if that makes the picture more or less complicated.
Apologies if this is overly broad, I'm very new and trying to get my head round some of the general concepts of these technologies. Any advice on narrowing this question so it's answerable would be appreciated.
Your question has a simple answer: Angular handles the front end and Django (and DRF) handles the back end, and that includes URLs. Users on a fully Angular-powered site should never directly hit a URL that is served by Django, except possibly for the initial page that serves the page structure and JS itself.
Apart from that, the only interaction between the two is when Angular specifically requests JSON from Django, via an Ajax call. That may well be in relation to a navigation event by the user, but just as equally could be triggered on a timed basis or via some kind of websocket functionality.
So, my current Ember project is built using Ember App Kit. My tests are using the wonderful httpRespond to mock out ajax requests.
However, I have started to notice that while httpRespond is great, you really only test how your app responds to responses from the API and not so much how your app responds to interactions from the user. An example of this I guess is submitting a form with server side field validations.
With httpRespond you mock out the response, which will be returned regardless of what the request looked like. So, I can essentially click the submit button on my form and successfully submit the form without having filled in any fields. This feels like we're missing something.
Enter Trek's Pretender. This is a bit like a sup'ed up version of httpRespond. It looks a little like a mock server but is just mocking out the xhr like httpRespond. Except you get access to the request which you can inspect before deciding what response to return.
I like this idea a lot and I want to use it. However....
Pretender is not yet Ember Testing aware. httpRepond understands the async workings of Ember and will wait for async events in Ember to finish before carrying on in the test. Pretender however, does not do this yet.
For instance, if I click a link in my Ember app which kicks off a few different async events, my test will not wait for these async events to finish before continuing and therefore, the test finishes executing before the async events have finished.
Which brings me to my question...
How do we go about making Pretender Ember Testing aware?
Trek has mentioned that this is something he has yet to do, but I'm not sure when he might have time to get to it. So I'd love to get it going if possible.
Does anyone have any thoughts how we might about attempting this?
I'm having a lot of success with ember-cli-mirage. It sits on top of pretender and allows you to create both fixtures for development and factories for use in tests. If you're still having trouble with this, or for anyone else, this is a really easy way to get control over your apps development data.
I am in the painfully slow process of learning Ember and find the guides and documentation severely limited when it comes to non-trivial examples.
To my question now.
Given the following router definition:
App.Router.map(function () {
this.resource('home', function() {
this.resource('weather', function() {
this.route('site', {path: '/:weather_site'});
});
});
When the user enters the home.weather.index route the model hook executes and fetches all weather information from the server. When the user then enters home.weather.some_site the model hook of the new route would bring weather data for that particular site from the server. How can this redundancy be prevented? In other words, how can controllers communicate data to each other? Should I use the setupController hook in each Route to achieve this or are there better ways?
Are there any good resources to help me understand the data flow in and out of Ember? Are there any good resources to help me learn Ember faster than digging into the source?
How can this redundancy be prevented?
It's not clear if/how/why the model hook for home/weather/index would fetch all weather information from the server. If that's desired behavior, then totally agreed there is no reason to fetch the same data when user enters home/weather/site.
If you are using ember-data there should be no redundancy since:
when user visits home/weather/index App.Site.find() fetches all weather data
when they visit home/weather/site App.Site.find(weather_site) returns site from cache and does not make a new request to the server
if user visits home/weather/site directly (or refreshes browser) then App.Site.find(weather_site) will call server and fetch just data for that site.
So unless there is something I'm missing there is no redundancy to prevent.
In other words, how can controllers communicate data to each other?
Seems unnecessary, but since you ask: Controllers communicate with one another via bindings. You declare a dependency from one controller to another via the controller's needs property, then Ember inject's a that dependency automatically. See the ember guide dependencies-between-controllers for more on how this works.
Should I use the setupController hook in each Route to achieve this or are there better ways?
That shouldn't be necessary in this case.
Are there any good resources to help me understand the data flow in and out of Ember?
Not clear what you mean by data flow. Best guess is that you'd learn a lot from Luke Melia's gothamjs presentation
Are there any good resources to help me learn Ember faster than digging into the source?
Reading the source is always a good option, but there are many other resources. I recommend checking out embercasts and ember weekly
I've done research on Django Postman and it seems to be the most solid private user to user messaging platform out there. I've looked at the Django Postman documentation but it's very template orientated. For developers who use Django as a back end and only care about the views.py and urls.py, the documentation doesn't say much.
I did however find this: https://bitbucket.org/psam/django-postman/src/6ff9fdf9c33f7365a7235a789af2e47f47d9c4fa/postman/views.py?at=default
It seems pretty promising so I'm going to give it a try. My only issue is how can one set up the postman views in views.py and the urls in urls.py to create a messaging system similar to Facebook's?
(ie. A thread like messaging conversation system, a central inbox where all the messages come together from each user showing the last message from each user, messages in the inbox are sorted by conversation rather than the message, the time of the last message sent, allowing multiple recipients)
Below I've posted a picture of Facebook's messaging platform. This is what I am essentially trying to achieve with Django Postman.
Facebook Example http://screenshots.en.sftcdn.net/en/scrn/73000/73077/facebook-19-371x535.jpg
If you have any pointers, hints and ideas on how I can set up the views.py, I would greatly appreciate it! Thank You
I've run into this issue before.
You need to strictly override some of the views in there by clonning/forking the project and install it from your own location, because as you noted, postman is template-oriented because it's meant to only get the needed templates configured and a few settings. I mean, the backend is meant to work as is.
What you need to do is override stuff like:
Message model's recipient field to be a ManyToManyField
customize the views based on your needs and be careful with Message.replied_at
make sure you allow a user to reply to their own messages (by default, it was not allowed when I ran into this, not sure now)
Depending on your needs, maybe you'll want to override something else, but this is a good start. If you need it facebook-like, you'll need to use some push libraries as Pusher or Juggernaut, maybe you're interested in them also.
Good luck! :)