How to pre load ember engines? - ember.js

Am using ember-engines in my project, After user lands in host ember application, I want my other ember engines to preload (say after 10 seconds), so that when user navigates to other tabs, there wont be any lag in UI.. i dont want to disable lazyLoading of my ember engines since that will increase the size of vendor js and css of host app during initial load.. Any reference for this is appreciated (I was not able to find any example or reference for this).

We can use loadBundle method of asset-loader service included by ember-engine as follow:
assetLoader: service(),
preloadEngine() {
this.assetLoader.loadBundle('<name of the engine>');
}
The loadBundle method return a promise and resolves when the engine bundle loads successfully.

Related

Elesticsearch and Emberjs

I'm trying to wire EmberJS with ElasticSearch. So far, I've read most of the Ember documentation, and found out this adapter for ElasticSearch.
The problem is I can't figure out how to use it (i.e. configure it so that when I call store.save(), my model is sent to ES.
What I have ATM is a newly created project with Ember generator (ember new ), and a generated controller, router, model, etc. My problem is that the Ember document explains how to customise adapters, but not how to use them (or I missed that part). The ES adapter's documentation says :
var App = Em.Application.create();
App.store = DS.Store.create({
revision: 4,
adapter: DS.ElasticSearchAdapter.create({url: 'http://localhost:9200'})
});
which implies to create a Store, whereas I can only see ways to extend it in the Ember documentation. Furthermore, I already have a Store in my application.
So the questions are:
do I need to override the store creation to replace it with the ES one (and where to do that) OR
do I need to extend the existing one, and in this case, how should I do that ?
Also, when it says:
First, load the ember-data/lib/adapters/elasticsearch_adapter.js file
in your application.
where and how that should be done ?
On your first questions/s
do I need to override the store creation to replace it with the ES one
(and where to do that) OR do I need to extend the existing one, and in
this case, how should I do that ?
You're onto the right track in the second part, you will need extend the existing one, but not the store, the adapter in this case.
So if you're using ember-cli, which according to this:
What I have ATM is a newly created project with Ember generator (ember
new )
It seems that you are and so you'll application folder structure should be like this:
app ->
adapters(you need to generate/create this)
components
controllers
models
routes
serializers
services
styles
templates
And now we can answer:
how should I do that ?
If you do not have the adapters folder yet, which you probably don't, just run ember generate adapter application or create a folder adapters, and a file application.js for that folder.
And that then finally leads us to a part of your last question.
load the ember-data/lib/adapters/elasticsearch_adapter.js file in your
application. where and how that should be done ?
import ElasticSearchAdapter from 'ember-data/lib/adapters/elasticsearch_adapter'
export default ElasticSearchAdapter.extend({
})
Now the possible bad news, that adapter is likely very outdated, as it the repository's last commit was 27 Dec 2012.

Using Ember.js in Existing Application

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.

Replace, not append to, the site's body content in Ember.js

I had the following idea: my page at example.org serves classic HTML from the server. Besides, EmberJS is loaded, too, and waiting to come into action:
as soon as somebody hits an ember route then, for example example.org/#/login, the current should be replaced by what the view renders for it. From then, the whole app should serve as one-page-app.
Is that a good idea? Anyway, I don't know how to get that started. Overriding View's appendTo method or setting the rootElement property as in http://emberjs.com/guides/configuring-ember/embedding-applications/ does not suffice because if that were the body, the view output is just appended thereā€¦
If your entire Ember application requires a user to be logged in, it is valid to have two separate "apps":
A regular non single-page application (server-side using rails, PHP or C#) with a sign up and login pages
A single-page application (i.e. Ember) send as soon as the user hits the login button in your regular app
You will have 2 index.html pages, one for each application (and it's okay to do that!). The URL of the Ember App could be under example.org/app/.... You will need to configure the router of the regular application to server your Ember App for all URLs starting with /app/.
Does that help? :)

Creating Controllers / Views for a Rails 4 Engine in App

Using Rails 4 I have an engine called Core that contains business rules and data objects for a system we're using. This is designed to be lean and in included in a few different apps.
I am creating an app that will contain some special CRUD screens for some of this core data, and I am not sure the best way to set up routing.
In other words, I want to create views and controllers for an engine's models without mounting the engine in my routes.
However, after running rails g scaffold_controller core::rep, I can't seem to get the url helper methods loaded. In my config/routes.rb:
namespace :core do
resources :reps
end
rake routes returns:
Prefix Verb URI Pattern Controller#Action
core_reps GET /core/reps(.:format) core/reps#index
POST /core/reps(.:format) core/reps#create
new_core_rep GET /core/reps/new(.:format) core/reps#new
edit_core_rep GET /core/reps/:id/edit(.:format) core/reps#edit
core_rep GET /core/reps/:id(.:format) core/reps#show
PATCH /core/reps/:id(.:format) core/reps#update
PUT /core/reps/:id(.:format) core/reps#update
DELETE /core/reps/:id(.:format) core/reps#destroy
Which seems fine.
However, upon navigating to URL: /core/reps
Showing /app/views/core/reps/index.html.erb where line #14 raised:
undefined method `edit_core_rep_path' for #<#<Class:0x00000002adf578>:0x00000002adc3a0>
Which I take to mean that the url_helpers aren't being correctly set up, and I have a growing suspicion that I am approaching this problem in the wrong way.
Is there something I am missing? Should I be trying to extend Engine Controllers in the app?
Can I use an Application's helpers with an Engine's models? Or do I have to mount the engine?
I know I can rails g scaffold_controller rep and then just patch the controller to load the data from the engine, but that doesn't seem quite right.
Have you looked at the proxy helpers bit in http://guides.rubyonrails.org/v4.1.8/engines.html#routes ?

ember.js - common functionality shared across controllers - popups, notifications

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