I am very new to ember.
how do i create a component/view that has to load data, for ex if i need a search box on multiple page (with some extra properties passed in), which hits the database and gets results. every documentation i read says the model has to be passed in to the view. however i do not want to copy the code which loads search results from the backend on every page.
ideally what i want to do
{{view myseachbox... extrafilter="yyy"}}
is setting the controllerBinding to say MySearchController where the functionality of fetching data will be implemented the way to go?
any pointers are appreciated.
Related
Scenario:
You have something like a wizard. The user completes something on the first page, click next and go to second page and so on until he reaches the last page. Here he clicks finish and all his input is stored and persisted using an ember model.
There are two other questions similar to this one:
Ember.js wizard control
Multi-step form (or multiple "pages") in one route using Ember.js
At first I've tried with a route/controller/view for each step, but since the answers are basically a controller's state variables and get lost while transitioning, it is obvious that it cannot work like this!
Then I took the approach described in the above links. One route, one controller, one template with lots of {{#if }} so that I show only the fields of the current step. I think I might improve this by using partials and so each step will have its own template.
The question is: is this the only/the best approach? Does anyone figured out a better way to implement such a flow?
If you make each wizard page a component and then pass the model as a template parameter to each component, you get a pretty nice workflow. The URL is stable (not constantly adding junk onto the end in order to pass state around); it's easy to drop the user into the first step whenever they enter the route (such as manually inputing the URL or perhaps more importantly, finishing the wizard and then hitting the browser's back button); and you can perform validation on each page of the wizard.
Check out my longer answer here
One of the possible approaches would be using Query Parameters so that you can manage a state of each step in a single wizard controller.
I'm using query parameters for paging and filtering. query-params-new provides a relatively convenient way to manage array returned from route.model.
But now I've got a page with a single object (f.e. group) as model, and a list of dependent objects (f.e. users in group), displayed at the same time. List should have paging.
The problem is that I dont know where I should put request for the list. Query parameters, needed for constructing list query, are only available in route.model method and in controller as properties.
Now I'm trying to find a proper way to get both object and list with paging in same route/controller. None of the ways I could invent, like combining them both into single object in route.model or requesting list from controller's observes function, seem right and clean. Currently I've stopped on saving query parameters in route.model and using them in route.setupController for second request, but that is a hack obviously.
I'm just looking for the right approach, without fighting framework.
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 can work with Ember.js(rc0) and Rails, and have a simple app working as I'd expect, but want to focus on a specific story:
As a user, I want to type in "filter" text in a form, then have my ArrayController only show me those items that match the filter. For example, think of a Contacts app that shows people with the name like "Ya%"...
Caveat: Say the database holds thousands of Contact records. I don't want to filter those contacts on the client, it makes more sense to do that on the server.
Question:
How do I do this in ember.js/ember-data? On the server, I can easily allow for a search parameter in my index URL to filter data so it's a manageable list, or even limit the response to say, 20 items.
I can also use a view to have access to my filter text in my controller, but where do I go next? How can I pass that filter onto the server?
Update:
I was able to use "find" on the model object, and ember (ember data) went to the server to grab new data - as the client side only had a subset of all the Contact records to begin with. Instead of filtering on what on the client, it automatically deferred to the the server... which is nice.
App.ContactIndexController = Ember.ArrayController.extend
search_term: null
submit: (view) ->
this.set('content', App.Contact.find({search: "#{view.search_term}"}))
This is a good use case for findQuery. For example:
store.findQuery(App.Contact, {q: queryString})
This will in turn call findQuery on the appropriate adapter, and if successful, load the returned records into the store and return a DS.AdapterPopulatedRecordArray.
Note that you can completely customize the query object to include params that match your server's endpoints.
Update: As Michael pointed out in the comments, the above is equivalent to:
App.Contact.find({q: queryString})
... which is certainly a cleaner solution, especially without direct access to the store.
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