I am writing an Ember app that consists of a handful of complex, stateful components. I am having trouble wrapping my head around how Ember handles this kind of app as it is not the traditional CRUD app.
It is a highly interactive single page application. Some example components are
Xmpp Text Chat,
Multi party audio,
Xmpp Shared whiteboard, and
Pop up notifications
There is a global state (which I can see handling via the router) that sets the user context (who I am working with on the audio/whiteboard). What I don't quite understand is what role if any the router would play in setting chat context which is unrelated to Audio and Whiteboard but still stateful. I can't picture how the URL string from the router can reflect state from all of these components simultaneously.
Is this a case where I skip using the router entirely? If so how can I link my application's views/controllers? Up till now I have been using the router's connectOutlets method to link my views and controllers. Without calling this method what would be another (structured and organized) way to do this binding?
Thanks
Good question!
Global state: Use the router
Application state: In controller singletons associated with your application components
As a general rule I recommend using the router to manage state that a user can bookmark or use browser forward/back buttons to interact with. Just guessing but for your app that might include id of the whiteboard.
Components like chat, audio, and notifications would typically exist and maintain state independent of the router. In some cases these components might behave differently depending on the route (like chat might bind to a specific channel depending on which whiteboard is shown) but the state of the chat widget itself be stored as properties on the ChatController singleton.
The ember guides are not complete yet, but you may find the last section of the controllers guide "Storing Application Properties" helpful http://emberjs.com/guides/controllers/
Related
i've red quite a of lot tuts and articles on ember.js and made some basic stuffs - some sanbox and test things, complete login screen with many outlets, actions, ajax and so on... but I am now facing one problem.
Ember.js is for "Single Page Application" and I did not found a way (yet?) how can I make and share basic functionality across more "ember apps"/parts?
I have some backend and then some modules (users, files, news,...) and each is made by classic:
App = Ember.Application.Create()
But I need to have some shared functionality and I dont want to repeat in at each app - I want to be able to show some notification - once from user app then from files app and so on. Or to have unified modal window, or function that check some things in background on server and push updates to notifications area that is running on each of those app parts...
How should I solve it? Is there any way of extending base App? or have to separates App on one page that communicates to each other? I've also read something about Ember namespaces but I am not sure if it is the right thing and how to user it :(
note: Each module (dashboard, users, files,...) is loaded as new page (complete html, new scripts,...), but module itself work as a SPA and on AJAX.
Ember.js has awesome documentation but real word example articles on how to use it are showing slowly and I had no lucky finding some tut/article on solving this problem in real world.
You can set another module and run it as another ember app in the same page, define the root element of the apps
var AppNotification = Ember.Application.create({
rootElement: '#notifications'
});
var AppUsers = Ember.Application.create({
rootElement: '#users'
});
So you need to associate the main apps to a div (#dashboard,#users,#files) and another div for the notifications.
I don't know if it it possible to communicate from one app to another, this is very advanced, but you can investigate ember instrumentation...http://emberjs.com/api/classes/Ember.Instrumentation.html
Good Luck
I just remembered (beer enligthment) other different way I've read months ago... load async code from the router JSBin example
You can have your notification js stuff and take the templates using this SO answer
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 am currently looking for a feasible approach to store form data globally in my Ember Application. The state of the form must get reflected in the URL. I have not yet seen an Ember example managing this kind of state, since routes always revolved around certain entities/models that get displayed by an Application.
Soo.. what is my Usecase?
When the user enters my app, he may modify some settings of my app in a form (e.g. location and time). I would like to have this information as part of the application state. Why? The state of the settings could be shared by the user with others users easily, as he could share the current URL of the application.
This is my current idea for an implementation:
I could store the current settings in a global location, e.g. in my router.
This enables me to access the stored settings in the methods serialize and deserialize of my main route (and potential other routes).
What's your opinion on my current idea for a solution approach? Is there maybe a appropriate Ember feature i have missed?
I'm developing an application that uses a parent controller class and a common Master page to make hundreds of database configuration fields available to multiple child controllers (like a "wrapper" class). I'm adding an external web service/feed that will also be used by all child controllers. It will read content from an XML, text or HTML file on a remote web server and use it on the Master page that is being shared by all Views (i.e. common content to all pages coming from an external source). However, I need to use an asynchronous pipeline to handle the request so that it's not tying up server threads waiting for calls to these remote web services.
Is there a way I can use MVC's AsyncController to accomplish this? I understand how it works in a simple scenario where I have a basic controller and a couple of Action Results. But this application has about 20 different Action methods in various controllers, and I really don't want to have to split all of them up into "Async" and "Completed" methods, especially since the retrieved data is only being displayed on the common Master page. Is there something I can implement at the "parent" controller level so that it's inherited by all the child controllers, or only in the Master page itself?
I'm given a task to develop a couple of applications in ColdFusion that will share some of the data - same data but different presentation.
The first solution that comes in mind is to create a ColdFusion widget that as I understand breaks some MVC rules within ColdBox I am currently using. I need more of a view within another view with its own controller and model (all in CFML, no Ajax). My understanding is that MVC does not support such hierarchy whilst its inherent in HMVC.
Any suggestion on the graceful workaround and/or alternative HMVC framework?
You can use ColdBox Viewlets, which basically makes the views self sufficient when rendered. This means that you basically render the widget "renderView("widgets/myWidget")" Then inside of your widget, you will broadcast an event for data retrieval. Basically, calling the view's controller layer.
Then your widget will be ready for use and be bound only to its announced event.
I am not sure I am understanding your question correctly, but with mvc, you should be able to have two views using the same model. Or, you could split the model out into a different place using webservices or something like that, and then have your model in your two different apps connect to it to retrieve your data. Or am I misunderstanding?