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
Related
I am working on ionic2 project, which is web project (i.e. runs as a website on browsers not a mobile app). Here I am facing difficulty to give specific URL for pages. How do I implement routing in my project ?
I also worked with angular2. Where we can give URL to components. But here that thing is not working.
Take a look at this website: https://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
and read up on the nav controller here: https://ionicframework.com/docs/api/navigation/NavController/
Some Context: While Ionic2 does use the native browser for each platform, it uses a special controller to change routes
NavController is the base class for navigation controller components like Nav and Tab. You use navigation controllers to navigate to pages in your app. At a basic level, a navigation controller is an array of pages representing a particular history (of a Tab for example). This array can be manipulated to navigate throughout an app by pushing and popping pages or inserting and removing them at arbitrary locations in history.
Before diving deeper into Ionic I suggest obtaining an understanding of this controller.
This sample ionic project will also help with the understanding of navController:
https://github.com/ionic-team/ionic2-starter-sidemenu
Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.
I've done some example apps in Ember, and now I'm ready for using it in existing application. Its traditional web application (request-response, full reload and some ajax loaded content, no rest/api things)
So lets assume I've few page (urls) like
1 abc.com/home.php
2. abc.com/support.php ,
3. abc.com/support.php?call=meeting
and so on..
so is it possible to use just one url with ember app and rest leave as such untill its ready?
PS: I did try for support.php as this.route("support",{path:"/support.php"}) and have SupportController and support.hbs template but its not working. I'm not sure how to put it in jsfiddle.
Thanks
Include your ember app only on the page that needs it, so only on abc.com/support.php
As far as ember can see, when you go to abc.com/support.php you are on the index page (of the ember app), and you will need to use the index.hbs tempate.
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/
I am creating an Ember.js application which basically has a very simple UI: header, content, footer -- all this in the application layer.
But, when you see the site at first, you have a hybrid application -- google needs to reach parts of it, but login, registration, dashboard, and other pages, should be handled by Ember.
And I might have a bit of an issue, because if I render some views, say on the homepage, in some outlets, then those outlets are going to be different after login, on the user's dashboard.
I cannot show off the UI, but i could try to provide more details if needed.
My question would be how to handle this issue?
I used a bit of a hack for now: just before Ember initialize, I remove from the DOM the content rendered server-side.
This might be ugly, but it works. This way robots may reach the content I want them to reach, the users on the other hand will see something better.