I have a weird issue using Ember 1.11 (built with ember-cli) and D3 Pie chart.
The chart is not displayed properly on ember routes, only on the index route (index.hbs).
The generated HTML code is the same on routes templates and index.hbs. I've used the same view/component on index.hbs as on routes.
Weirdly enough, I can fix this issue if by going to Inspect Element and removing the entire <head></head> tag. (Removing the content line by line does not fix it!)
I've installed a sample Ember application here. On the index you will see the chart. On the menu routes, there is the same chart (rendered with same view as it was rendered on index.hbs), but not displayed properly (it works a bit when you hover over that area).
The HTML code generated by the chart view is the same on all pages. If you copy the code from <div id="pieChart">..</div> and paste it in a empty static html page, the chart will be rendered correctly.
This issue can be reproduced using: Firefox/Chrome. In safari it seems to work.
Here is a paste2 which renders the chart.
The entire application code before build can be found here.
Edit: I've also reported this issue on github, here.
Set ENV.locationType to "hash" instead of the default ("auto"). Since you're working with an ember-cli application, this lives in config/environment.js.
The ultimate culprit for this can be found here: https://github.com/benkeen/d3pie/blob/master/d3pie-source/_segments.js#L44. Basically, d3pie is using a pattern fill for the circle arcs, which is exposed as a URL. When you're inside a route, that ends up having to go through Ember, which is configured by default to ignore hashed routes. By switching it, you effectively take that call out of Ember's routing namespace and it's able to resolve correctly.
Edit
See here for a working example: https://github.com/Little-Jon/so-29780096
Related
I am using coffeescript with react-rails gem. In the measure.js.coffee, there is no span present in the coffee code, but when the HTML is getting painted a mysterious ghost span is appearing. Below is a screenshot of code and HTML generated by it.
In my code, there is no span in between carousel-mImages and mtag-images. Is it because of the reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
Yes, ReactCSSTransitionGroup is a wrapper around ReactTransitionGroup.
And from the official docs here:
By default ReactTransitionGroup renders as a span.
You can change this behavior, and render as another type of component, but this would mean you have to manually configure and render the ReactTransitionGroup.
This may save you one wrapper element in the DOM, but this depends on your component tree structure.
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/
I am working on a bit of code to show a D3 chart using Ember fixture data as the source for the data. The charts show up just fine on the first load of the page but if I move to a different route & then return to the first route (the one with the working chart) the chart simply disappears. So I guess my question is, how do I get the chart to appear every time the route is visited? Here is what my Route and View code looks like, will add more code if requested.
Updated with JS Bin: http://jsbin.com/ihapaz/2/edit
The route may not be getting any data when you return back to it. When using linkTo the model hooks are not fired. The setupController is called directly with the model that you pass to linkTo. However if the route depends on the model hook having fired to load it data then the view would be empty as it wouldn't have any data to render.
That's the only thing that comes to mind from the above code. Try posting a jsbin if this doesn't work.
Edit: Post jsbin
After looking at your jsbin I realized my earlier answer was incorrect. In general it is true that linkTo skips the model hook, but only if dynamic segments are present. Your route has no dynamic segments. Hence the model hook will always be called, so the view/chart is getting data correctly.
The error is in your implementation of render. The purpose of the render method is to push strings of html onto the DOM. This isn't the appropriate place for custom DOM insertion. For that you need to put things on the didInsertElement method.
I made these changes, renaming render to didInsertElement and the corresponding updateChart. Here's the updated jsbin.
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.
i have a simple text field helper, taken directly from the ember contact example. it works properly in this jsfiddle, using ember-0.9.8.1 : http://jsfiddle.net/inconduit/dKsh3/2/
however when i try to run the same code using the latest ember built from master (v0.9.8.1-421-g189ad79), the content of the text fields never get set (they remain as empty) and double clicking them has no effect. why is this happening?
It's a context issue. You have to prefix the properties in the templates with "view".
See this modified JSfiddle:
http://jsfiddle.net/dKsh3/4/