What is the ember-cli way of displaying a static message to indicate that the emper-app itself (vendor.js) is loading (being downloaded)?
Current situation
Index.html is blank pre vendor.js download
Goal
Display something to the user while vendor.js is downloading to avoid making them leave the page while its loading.
Solution idea (not yet tested, not yet known if it's a good solution)
Create a named div in the index.html file
Hide it on ember initialization
Have you tried "loading" route in ember?
You can place any template you want to display during loading into "app/routes/loading.hbs".
If you are using pods, place it into "app/pods/loading/template.hbs".
If you want more detailed instructions, see:
http://emberjs.com/guides/routing/loading-and-error-substates/
Related
In the Aurelia SPA template it assumes that every page will be inside app.html and use the same nav-bar at the top. But I'll have many pages that don't want the nav-bar at the top and actually not use app.html at all. I was looking at main.js and it looks like I could hook into bootstrap() and change the aurelia.setRoot() for certain pages (I'm just guessing here), but then I start mucking up the main.js file and it won't be long before it gets really messy and maintenance headache. I really just want to have some pages use their own format altogether and ignore the app.html formatting without doing any crazy configurations.
My initial thought is maybe app.html should just be an empty file and make every page decide whether or not it wants the nav-bar and include it on the individual pages. But now I'm duplicating the code across many pages and if the standard page layout changes I have to change all the individual pages. Not sure the best way to go about his. Any suggestions?
I actually disagree with Gilbert's answer. Using .setRoot is a best practice; the root is just the parent view/viewModel pair and you will often have different parents. This is essentially what you're doing when you're creating an empty app view/viewModel, creating a new parent that doesn't do anything. But adding an unnecessary, unused layer is just extra complication.
One of the best use cases for this is a login page. The login page is totally different from your normal app page--there's a login prompt, no navigation bar, etc. Therefore, make a "login" app root and a "app" app root and switch back and forth between them. I've built a template called Sentry that demonstrates how to do this.
Sentry in action
Sentry on GitHub
Using set root, like you said, is a bad idea. Similar to what you said, you can make app.html contain just the router view tag. Different parts of your app, that you want to share a similar page layout, will be gruped under different routes. Now each of theses routes will point to another router that will have its different styles in the view
Just think of it as an empty app.html with child app.html's that have styles in them(e.g. Different navbars, page layout etc)
I want to know the low-level implementation of ember framework. When the handlebar templates defined inside script tag with type="text/x-handlebars-template" getting appended to the DOM? Also, how browser excludes that script?(i.e How actual flow of rendering a page is modified. I am new to ember and handlebars and just curious to know this.
I just run a couple of experiments with an older version of Ember for understanding more, what is really happening under the hood. (It is totally relevant to the latest Ember versions also.) You can read my findings in the Readme here: https://github.com/zoltan-nz/ember-resolver-experiment
Answering for your question, Ember will run the following function during the initialization process: https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/system/bootstrap.js#L40
As you see, there is a bootstrap function, which uses jQuery to find those special templates scripts in your DOM. It will compile with the ember-template-compiler and it will be added to the Ember.TEMPLATES object. (You can check in your console if you type Ember.TEMPLATES.)
As you see in this bootstrap function, these template script tags will be removed (line 72) from the DOM after compilation.
Each version of Ember package comes with different ember.js files (for production, and for debugging) and you can find there ember-template-compiler.js, which is basically the handlebar compiler. You don't need handlebar.js at all in ember project, because this ember-template-compiler.js is your handlebar.js.
If you would like to learn more about Ember.js, I wrote a free tutorial which start from the very basics: Ember.js tutorial
For the last question first :
A script is never seen in a browser so there is no need to exclude it from beeing rendered. WebComponent templates are now a replacement for such script template but if you are using some older template they will still be displayed so a script tag is a better solution for now if you want a template to be compatible with all browsers. So the rendering of the page is not affected. At the end of the page load you'll run your handlebar script that will calculate the template rendering and once it's done will insert it in the dom (typically replace a placeholder).
For your first question :
The question is unclear do you want to know how the template is appended to the dom or when it is appended or how it is rendered ? The best way to know that is to look at the source of handlebars.js. I don't know for ember.js but if you're just using handlebar you'll have to add the result of your processing manually in the dom (by using jquery for instance).
In our attempt to transform our code from FTC to CAM we are facing some minor difficulties from the branding perspective. I’ll briefly elaborate about our scenario below:
In our current FTC implementation we are using both CSS and JS to render the desired UI. References for both the assets are present in the master page and hence get rendered with the HTML
Since it is recommended not to modify the master page when moving to vNext, we decided to go via the custom actions route.
We added custom actions for both CSS and JS to a test site. On browsing to our test site, we found out that the UI was appearing as desired but only with a noticeable lag.
As it appeared, what was happening was that the corev4.css was getting applied and then after around 2 seconds our custom CSS would be applied leading to an unpleasant flickering effect.
I went through a project named Branding.CustomCSS present in the PnP samples which did a similar thing of applying the CSS by rendering link tag via a custom action. In the documentation for that project, it was mentioned that this wasn’t a recommended approach for applying CSS if we are on Office 365 or April 2014 CU on-prem. Instead, the AlternateCSS approach was recommended.
I modified the code to use the AlternateCSS approach for rendering the CSS reference while keeping the custom action for rendering JS reference as it is. That certainly improved the experience.
We still had the JS file though which was manipulating the DOM to achieve the desired look and feel and that was still loading with a delay. We suspect that this is happening because in case of Custom Actions the code to insert JS references runs after the page is loaded. While the JS loads and executes, the UI that is shown meanwhile is without the DOM manipulations and is not what is desired. So the flickering of some components in the page, that the JS is responsible to beautify, is still present. This was not the case in our FTC where there was no noticeable lag.
I required some suggestions as to what approach we should follow so that we can do away with the delay in loading such asset files?
Also, is there an approach that would render JS references along with the HTML and not after page load like it does in case of custom actions?
I too are experiencing this issue. It is a really ordinary user experience. As you said, you can limit it by updating the logo and applying the alternate CSS in the provisioning process, but you still get that noticeable flicker. I have been experimenting with adding ms-hidden to the body tag at the start of the process, then removing it at the end, but it hasn't helped much. I might see about hiding the body from the get-go via the alternate css, then in the injector.js file override that style. Any suggestions from others would be greatly appreciated though. The PnP only has a basic injector scenario where it puts a message in the status area, but that isn't really a realistic scenario.
I'm trying to create a loading substate for the Application route using the new named substate options added recently, but for some reason, I can't get it to work. Originally, I just had created a simple template, loading.hbs, and it worked automatically, but because of the issues with substates on the application route, some of my UI was still visible. I'd like to correct this now.
I've tried renaming and moving the template around to the following places:
/templates/application_loading.hbs
/templates/application-loading.hbs
/templates/application/loading.hbs
None seem to work though. I don't need any custom routing behavior so the default generated route should do me, unless its a requirement for this to work. Documentation on this feature seems to be sparse. I found the jsbin for this feature and I should be doing it correctly according to it unless there's some issue with ember-cli.
Thank you for any assistance.
DEBUG: -------------------------------
DEBUG: Ember : 1.11.1
DEBUG: Ember Data : 1.0.0-beta.16.1
DEBUG: jQuery : 1.11.2
DEBUG: -------------------------------
I believe that loading.hbs and error.hbs are the application's loading and error substates. Your application-loading.hbs doesn't exist to Ember, which is why it's not working.
As for the additional UI elements: I believe the rest of application.hbs is going to render regardless, so the only suggestion I would have is to nest all those elements one level deeper. It sounds like a big ordeal, but it's actually not that bad:
In router.js:
this.resource('whatever', {path: '/'} function() {
// All your existing routes
});
Then rename application.hbs to whatever.hbs and change application.hbs to just have {{outlet}} in it. This should really change very little else in practice, but it will keep the rest of your UI elements from rendering until loading is complete.
Really should've google it before adding the bounty.
Evidently, this feature is broken. There's a fix already though, just needs to be merged and released.
It looks like you must have a moduleBasedResolver
https://github.com/emberjs/ember.js/blob/06e41ad7ccd28558dd4e651aa070bc06f7757821/packages/ember-application/lib/system/application-instance.js#L153
https://github.com/emberjs/ember.js/blob/b80d66f71d75ad0db9022438ed58a41ac84f45f5/packages/ember-routing/lib/system/router.js#L79
When I look at this value in an ember-cli app it's undefined. Which seems odd because ember-cli is es6 module based.
Then I found this https://github.com/emberjs/ember.js/issues/10756 looks like you can add a route application-loading or hack in moduleBasedResolver onto the registry as a temporary solution.
and
https://github.com/emberjs/ember.js/pull/10944
should fix the issue in the longer term.
It appears you already found this, it did not appear loaded when I wrote this answer. Sorry for the noise.
Right now I am using one webview to show data from my aplicationDatadirectory, here everything is working fine, I get content when user click next back respectively. Now what I am doing is in onload of webview I register "touchevent" and "touchmove" in webview's html like this :-
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchstart", function mytouch(){Ti.App.fireEvent("touch", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchmove", function mymove(){Ti.App.fireEvent("move", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
on the basis of this I find swipe event. I get correct html in webview(I can see images). But I am unable to get touchstart and move call. I dont know what is the problem here. I set data in webview using url here.
Now when I set data in webview using html(I used data of my html file(given below) in one var) now I am unable to see images it just shows me one black border(empty) but here my touchstart and touchmove events are firing also my swipe is also working as expected. I am checking this functionality in iPhone.
Can any one find the issue what is going wrong here? Thanks.
I think that this depends on the time when you apply
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchstart", function mytouch(){Ti.App.fireEvent("touch", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchmove", function mymove(){Ti.App.fireEvent("move", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
If you use the html property data is loaded immediately and you can use the code exactly after setting html content. If you use the url (even if it is located locally, which might be difficult for android) then you need to wait a short time until the page is loaded. There is also an event listener for that (web view-event load) but i can't say if that works for local resources but i don't think so.
In this case you should apply your javascript snippet into your html resources (if they are locally) instead of manually adding it using evalJS.
Please note that there is an issue on android that you can't use local images (resources folder) in your webview when you provide the content via html property.
I made it swipe working in iOS(in android it was working).
I did not expect this thing to be a reason but I do not know logic behind it. I was accessing .xhtml files from application data directory and it was working without any issue in android but in iOS it was not.
I just change(rename in my code) .xhtml file to .html and now it is working. :)
Hope this can help someone who is looking for the same.(or just for his interest)
Thanks.