I want to load parts of my Ember.js application on demand (app is structured with AMD but merged into a few big script files for production).
An example:
Browse to '/'
The user starts at /, the HTML loads the file core.js which contains Ember.js, the routings and the application controller + view.
Browse to '/user/settings'
So now the user browses to /user/settings for the first time. The views, controllers and templates for this are in user.js which is loaded via a script loader in the according route:
App.UserRoute = Em.Route.extend({
enter: function(ctx) {
this.ajaxLoadFiles("user.js", function() {
// ???
});
}
});
Problem
Somehow Ember.js needs to wait for the script to load and then continue routing ... how do I do this?
I am using require.js, it is great for modularising your code!
You can clone the todoMVC AMD version to study here
https://github.com/addyosmani/todomvc/tree/gh-pages/dependency-examples/emberjs_require
for further advice, see this post:
Is there any way to split an Ember.js app across a few files?
Related
I have built an ember application which has two routes say route1 and route2.
I got the compiled files from dist folder. I put those files in a tomcat server.
When i try to access that file through index.html, it works fine. But how can i navigate to a route in that compiled application?
Normally in ember-cli development environment, we navigation to a route using server:port/route_name
How can i perform the same operation in index.html without using any hyperlinks for routes?
Edit:
Got the answer. Setting ENV.locationType = 'hash' solved the navigation problem. I was able to access the route using index.html#/route_name
But I am still stuck with how to integrate ember app into a non-ember app.
Got the answer.
Setting ENV.locationType = 'hash' solved the navigation problem. I was able to access the route using index.html#/route_name
Setting ENV.APP.rootElement = '#ember-testing' solved inserting ember app into non-ember app. Create a div with the rootElement ID and then ember will automatically place the app inside the div.
I've got an Ember-Cli App and would like to create an admin-interface for my application which looks nothing like the page set up in application.hbs.
How do I make the admin-interface independent from that one?
The way I achieved it was to have the base route and, in your case, admin route, kind of what #jcbvm was saying. So the router would look like:
this.resource('base', {
path: '/'
}, function() {
this.path('my-route');
// the rest of the app
});
this.resource('admin', {
path: '/admin'
}, function() {
// admin part
});
I think this can hardly be achieved, my best bet is to either creating a separate application for your admin interface or by moving your core application to a separate route.
When moving your core application to a separate route, you can move the contents of your application.hbs to the template of the new route and your admin interface to the admin route. The only drawback of this is that you will always see the name of your core route in the URL when going to the core application.
You should likely go down the path of Ember CLI addons, see here
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
Say I have a web app - a large, complex, rails app, like an accounting application. I see a use for several single page apps instead of the typical rails round tripping pages. For example, I can see a user better served with an intuitive single page/dynamic app for:
Creating Bank Reconciliation
Creating an Invoice
Filling out a Time Report
etc..
These are all distinct one page apps...
All the ember apps I see are single page and single purpose.
I want to have many single page apps, built with ember. How would that look with respect to:
Routes: I'd have a combination of server routes and client routes. How would that look in Ember? Serve different Ember applications, each with their own application router and routes?
Templates: Would all my "applets" get compiled and pushed down to the client on load? Or would I leverage require.js and load each single page app depending on if they're navigated to?
...
Can anyone help with those two questions?
Thanks in advance!
Routes: I'd have a combination of server routes and client routes. How would that look in Ember? Serve different Ember applications, each with their own application router and routes?
Depends on how much overlap there is in terms of features. For sure you could serve different Ember applications with their own router and routes. In that case you would probably also write a shared library with common base classes and mixins.
An alternative would be to have a single ember application that looks and behaves very differently depending on the route. That's where I would start until you have a good feel for ember and see a compelling reason to split things apart.
Templates: Would all my "applets" get compiled and pushed down to the client on load? Or would I leverage require.js and load each single page app depending on if they're navigated to? ...
Path of least resistance in rails is to use sprockets to compile and package your templates - once compiled they are just javascript. Typically a rails app will bundle all javascript into application.js and include that on load. An alternative would be to split application-specific code and templates into app1.js, app2.js, etc. and load each when the app is navigated to.
I would suggest using a PODS structure and then you can have routes like
/app1/
/route1
/route2
/app2/
/route1
/route2
etc...
If you generate with pods structure you folders e.g.
ember generate route app1\route1
you will end up with a good folder structure that you can split up later, something like:
/app
/pods/
/app1
/route1
route.js
controller.js
template.hbs
/route2
route.js
controller.js
template.hbs
/app2
/route1
route.js
controller.js
template.hbs
/route2
route.js
controller.js
template.hbs
I run a website served by Django, and almost all the logic exists on the server side.
However, I have a few pages that are AJAX centric (for instance the comments page), and over time such pages have grown to be too messy, with multiple nested AJAX callbacks, and heavy DOM manipulation.
It's too hard to maintain, so I decided to give Emberjs a try.
I would like to avoid having some JS files that are linked only by the pages that need them, because I compress all my JS in one minified file, that I serve.
Is there a way to not initialize Emberjs if I don't need it?
For instance, here some HTML:
<p>
I don't need ember in this page!
</p>
And some JS:
App = Ember.Application.create({
rootElement: "hello"
});
Ctrl = Ember.ArrayController.create({
content: [],
init: function() {
alert("Ember is initialized anyway.");
}
});
Fiddle: http://jsfiddle.net/JYvSE/
The alert in my controller's init function is executed. I could put this in my HTML:
<div id="ember-enabled"></div>
and then in my controller I could do:
if($('#ember-enabled') === undefined) return;
but that would spare me the controller code, not the Emberjs initialization.
Any suggestion on how to solve this problem? Thanks!
One approach would be to use a module system like minispade or require.js, and only require your "main" ember app module on the pages where you want it. The main module would be the one that requires the ember application and other core modules.