I have a component which render 500+ data into a HTML table rows
It take almost 3 seconds to render and the browser is completed blocked.
I cannot use pagination because the client want it excel-like and it is a static site.
Is there a way to solve this issue? For example create a loading state before the component is rendered?
I guess 500+ row does not fit to the screen (viewport), so you need to use a scroll.
There is an addon named ember-in-viewport. It gives you the ability of not rendering the component if it is not in viewport.
Here is a sample twiddle. Change my-component to my-proxy-component in your applicaiton.hbs to see the effect.
Don't render all the objects at once, just load what's visible inside your viewport. There are already different Ember addons doing exactly what you need.
Some addons you could use:
Vertical Collection
Ember Infinity
Ember Light Table
P.S. Of course you could also create a component/addon yourself and use the ember-in-viewport addon #ykaragol suggested, but I think that's overkill in your situation.
Related
I'm looking at creating a google maps component. But I would like it to be self contained so it will have its own model, controllers and views. So for example the component will fetch its own data from the server and I'll also be able to refresh the data when needed. Ideally I'd simply add the component to the current template that is showing, so for example: {{map-view}} and then everything the component needs to do will take care of its self.
The component will also need to listen to triggered events from other controllers as a user will be able to search for a specific location and the map will need to change its position.
Is this possible to do in EmberJS? As I haven't found anything like this, specially when having its own model. I know there is a component in EmberJS but it seems very limited. Am I wrong in thinking this?
the controller cannot have its own model all values must be passed to component. Please refer to ember docs and this Discussion
You can make a google map component and pass the location and marker data to the component. this data will get updated due to ember data binding.
so you can have something like this
{{map-view location=userEnteredValue}}
you can search for ember component talk by Kris Selden on youtube which includes a google map component good for you to start with.
updated
https://gist.github.com/krisselden/8189650
I have a simple application that uses jqplot to graph data. This application has a single route attached to an ArrayController. I display the items to be graphed on the left side using the {{#each}} helper; I also display a 'graph' button up top. The user can select one or more entries from the list and hit the graph button. The button is attached to an action that calls jqplot to graph the selected data on the right side. Functionally, this works fine, but feels like a hack. Does anyone have an opinion on how this can be re-structured to perform similar function the 'Ember way'?
This app only has one model, so doesn't seem like I would need a second route. I do need to somehow handle re-graphing if the user resizes the window. If I weren't using Ember, I would handle window resizing like this:
$(window).resize(function(){
plot1.replot ({resetAxes: true});
});
where 'plot1' is the return value from the original call to jqplot.
How do I do this in Ember?
I'm using Ember 1.4 with EmberData beta 7.
You can put custom JS code in the didInsertElement() hook of your view, which will be executed after the view is rendered.
There's a corresponding willDestroyElement() hook for your teardown code.
So, is there a generally-accepted way to do this? Attaching to didRenderElement in a view seems to work, unless you need data from the model.
Likewise, you can override setupcontroller to run something once a model is loaded, but who knows if your elements are rendered yet?
Should I be using "on"? If so, on what? Where?
How about if I want to wait until the model is loaded, elements are rendered, AND, say, images are loaded?
The thing here is that didInsertElement only notifies you when the template has being rendered into the DOM, images loaded or not. Normally the rendering will wait until your model has being resolved to render the template, but in case of images this is somewhat different, because I guess your model only contains the url's to the images and not the raw data.
Should I be using "on"? If so, on what? Where?
To be notified when all your images has being loaded you could use a plugin like: http://desandro.github.io/imagesloaded/ and attach an observer to the plugin event to be notified, ember does not know when your images are being completely loaded it cares only for your model being resolved, then it will render your template.
Hope this helps.
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.
I'm putting together a website, where one of the pages holds an interactive map. The map is implemented as a big table, where each node is a td.
Now this map takes a while to render, and so, I'd love for the site to be displayed as it renders, so that even if the map is not fully rendered, the user can click links or the part of the map that is rendered.
Is there an easy way to do this? AJAX is one option, but since it is a Django website and the map depends on data from the Django template, AJAX becomes a bit unwieldy.
So is there a way to make the page visible while rendering?
(I considered making each node an iframe, so that they would be rendered individually, but that seems a bit silly too)
the django template should only render an empty map (or a map holding the first 10 points) with the javascript code firing on page ready
this javascript script should do this:
request 10 nodes from django (using a different url/view)
render the fetched nodes into the page
if no more nodes: END
goto 1.
Hope this helps
After trying a few different things, it seems that the problem was too many database queries. Each of the nodes made calls to the database while rendering, which caused them to be very slow.
For reference:
Custom filters in Django should not make database queries, if they are used heavily on a page