Polling using Ember-Data with Rails backend - javascript

Background
I'm more used to Rails but trying to improve my client side javascript by switching to an MVC. Ember seems like a good fit for me (it has good integration with Rails and a similar convention over configuration approach).
I'm using Ruby 2.0.0, Rails 4.0.0 & Ember 1.0.0-rc6.3 so realise that this is all pretty new.
However, so far I've managed to display data from the database via a JSON API without any problems and it is working great.
Question
I'm currently struggling with updating the data when it changes on the database though.
My initial approach is to begin by using polling to keep the client data updated as the background job processes and updates the database (I would like further down the line to try SSE and Live to make this process better - but polling to start with).
The polling aspect is working fine like this in my controller
App.AnalysesController = Ember.ArrayController.extend
loaded: (->
setTimeout (=> #poll()), 1000
).observes('content.isLoaded')
poll: ->
console.log #get('content')
#get('content').reload()
I thought i'd found a solution to my issue with this commit:
https://github.com/emberjs/data/commit/278a0b863f0b1b2494fe2319ac12be6167195f6b
Whereby you can reload the model.
Unfortunately I am getting this error when I try...
Uncaught ReferenceError: reload is not defined
Which I don't understand because it looks like my content is of the right format and is not updating
Class {type: function, store: Class, isUpdating: false, toString: function, constructor: function…}
However - this works...
App.AnalysesController = Ember.ArrayController.extend
loaded: (->
setInterval (=> #poll()), 1000
).observes('content.isLoaded')
poll: ->
#set('content', App.Analysis.find())
Though it feels wrong to me - I should be using the model not duplicating the find query surely?
If anyone has any ideas why reload is not working i'd really appreciate it, as i've hit a bit of a wall but up until now have been enjoying learning Ember.
Thanks!

Reload lives on the individual models, not on the array of models. Your second approach is the correct approach, unless you want to iterate over the items in the array controller and call reload.

Related

What is the recommended way to persist the data in background task? [UWP/W/WP apps]

The question is quite simple, but I seriously couldn't find any sample that would demonstrate something I'm trying to achieve, maybe it's me who is didn't get the concept of background tasks in uwp applications (or windows / windows phone 8).
I'm creating an application that is polling some data (traffic incidents) and would like to be able to notify the user about the closes ones even if he is not using the application. So I reckon I would use the background task. (I hope I get that part right).
So in the background task, which I've set to run on timer of 15 minutes, under the condition of "InternetAvailable", I fetch the data asynchronously and once it's done, I'm completing the deferral object as it's required. All works ok.
The question is, what object shall I use in order to persist the data so I could read the data once the application is opened?
I've tried the WinJS.Application.sessionState but that gets lost once the application is ready (opened).
I've tried the Windows.Storage.ApplicationData.current.localSettings but it says there is a type mismatch, apparently I'm trying to put in there the object, if String is expected (I reckon)...
So does anyone know what is the best practice here ?
Thank you
You have full acess to the WinRT API, so you can write a file (and read the same file once the application is opened):
function saveData(dataObj) {
var applicationData = Windows.Storage.ApplicationData.current;
var localFolder = applicationData.localFolder;
return localFolder.createFileAsync("dataFile.txt", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (sampleFile) {
return Windows.Storage.FileIO.writeTextAsync(sampleFile, JSON.stringify(dataObj));
});
}

EmberJS Reset Warning: Library is already registered with Ember

Some background...
We have an ASP.NET app we're slowly converting over to EmberJS. We have a single Ember application we instantiate for certain portions of the site. As we migration pages they get routes in the Ember app. The goal is to have everything in Ember over time. In the interim, the user can click on links that take them back to ASP.NET portions.
Our issue is with resetting the state of the Ember app if the user either clicks back to go back into Ember or clicks on a new link that takes them back into the Ember portion.
We've tried calling .reset on the application, but doing so gives us an error saying the following. Our application is called ConsoleCli and not the standard App.
Library "ConsoleCli" is already registered with Ember
Moreover, we get the following error saying one of our modules has already been registered.
Cannot re-register: `location:history-js`, as it has already been resolved.
I tried wrapping my registration of the history module with a check, but that creates a whole other slew of errors
if(!application.__container__.lookup('location:history-js')){
application.register('location:history-js', HistoryJsLocation, { singleton: true });
}
I read https://github.com/emberjs/ember.js/issues/10310 and I think it means reset() is supposed to clear all registries once this has all been merged into the main branches.
Shouldn't called App.reset() right in the middle of using an EmberJS application just reset it with no issue?
Excuse my lack of understanding, we're just learning all of this as we go.
We're running the following versions
Ember 1.11.0-beta.2
Ember Data 1.0.0-beta.15
jQuery 2.0.3
TIA!
I think you might have run into this bug: https://github.com/emberjs/ember.js/issues/10310
Try the fix mutewinter suggests in that thread, it has worked for most people (involving myself).

How can I write a script to automatically walk through a process like my user would?

I have some valuable processes on my site that I'd like to track regularly to make sure they are working. I wrote some javascript that will run the actions if the starting page contains a particular parameter, but I can't figure out how to properly execute the script without opening the page in a browser.
My best guess is I need some sort of chron driven bot for this, but I don't even know where I should begin with that and haven't found anything in my searching. I tried a cURL request, but it doesn't seem to fire the js. Really, if I could just find a way to properly initialize the js with a chron job that would be sufficient.
The key here is that I need it to execute the javascript so I can imitate user actions.
I'm working on a WordPress install, so it would need to be a php or javascript based solution. How can I build something like this?
Use an interaction testing framework like Ember.js. that should allow you to test your UI Interactions.
See the link above to get some detailed information on how to use the library.
Here is a code snippet from the Ember.js library to see if a user is
redirected properly if not authenticated (100% javascript!):
module('Integration: Transitions', {
teardown: function() {
App.reset();
}
});
test('redirect to login if not authenticated', function() {
visit('/');
click('.profile');
andThen(function() {
equal(currentRouteName(), 'login');
equal(currentPath(), 'login');
equal(currentURL(), '/login');
});
});
Ember.js is an excellent way to test your user interactions and your UI components.
Learn more here: http://emberjs.com/guides/testing/testing-user-interaction/
UPDATE:
See this answer for another solution that combines CasperJS and PhantomJS to test user interfaces.
Good luck!
If you don't want to have a browser open to do it you could use a headless browser like PhantomJS

Ember and Syn integration

I'm having trouble integrating bitovi syn (link), Rails 3 (asset pipeline), Ember and qunit. I want to use syn for browser simulation for testing purposes. Has anyone done this, if so, how?
I'm using the version of syn that was released 11 Mar 2014. When I load it into my app, two things happen:
I get a global failure in qunit that says "TypeError: 'undefined' is not an object (evaluating 'Syn.schedule')", (around this line: syn.js?body=1:1084)
and
A div with a form is added to my application.
I'm using qunit for the most part, and I dabbled with using YUI to do browser simulation but it isn't working quite the way I had expected it to. I'd really like to use Syn, but I don't understand why it's not working.
In attempting to get it work, I tried adding this line to the top of the syn.js file:
window.Syn = { schedule: function (fn, ms) { Ember.run.later(window, fn, ms); } };
but it didn't do anything much at all.
I'd read on this pull request: https://github.com/bitovi/syn/pull/28 that I could add that piece of code to mount it in a fashion to work with Ember.
Any help would be greatly appreciated!
So the thing here was simply to load Syn at the bottom of the page. It's potentially a bit broken at the moment in the case where you want to load it in the head (which I probably shouldn't have been doing anyway, but still!) :)

Attempted to handle event `willCommit` on while in state root.loaded.updated.inFlight

I'm learning how to use EmberJS by doing the introductory tutorial form the "Getting started" page. However, when I get to the "Accepting edits" part, I have a bug:
Uncaught Error: Attempted to handle event `willCommit` on <Todos.Todo:ember304:3> while in state root.loaded.updated.inFlight.
The call to Todos.TodoController.acceptChanges() seems to be triggering that error. The part I'm referring about is this one:
http://emberjs.com/guides/getting-started/accepting-edits/
After reading up on model lifecycle in Ember - http://emberjs.com/guides/models/model-lifecycle/#toc_in-flight - I still don't get why this bug appears.
One work-around is to save the model each time it changes (so every time the value of the <input> changes. Which works fine but would probably perform poorly with a HTTP API (as opposed to fixtures).
Could this be due to BC breaking changes in the ember-data lib?
What else could cause this?
Versions of libraries I've used:
jQuery: 2.0.3
Handlebars 1.0.0
EmberJS: 1.0.0 RC7
Ember Data: v0.13-102-g6bdebe7
After reading up on model lifecycle in Ember - http://emberjs.com/guides/models/model-lifecycle/#toc_in-flight - I still don't get why this bug appears.
This is not a bug, the in-flight section say's it all:
A record that is in-flight is a dirty record that has been given to the adapter to save the changes made locally. Once the server has acknowledged that the changes have been saved successfully, the record will become clean.
This means that you are trying to change the record while a previously change made it dirty and a possibly call to this.get('store').save() is still in the doings e.g. waiting for the server to respond. During this time frame you can't make changes to that same record without getting the error.
So a solution could be to not trigger this.get('store').save() after a character of the textbox has changed but rather on focus out for example, or even with a explicit button to save the record which you could disable until your server acknowledges it's change, this would not make a request for every character to the server resulting in sluggish performance due to some latency. Hope this makes sense.
Hope it helps.
I had this same issue with the Getting Started guide. I solved it by checking if the model was currently saving in acceptChanges:
acceptChanges: function() {
var model = this.get('model')
if (model.get('isSaving')) { return }
this.set('isEditing', false)
model.save()
}

Categories