I have a controller and a model that get some data from the server.
I'm trying to initialize two views, one for editing and one for showing a list of items related to this data. For example, the model holds some search properties which the user may edit. After editing the search params I want to switch between the two views and display the refined search results.
I can't find any sample that does such switching.
I tried using Ember.ContainerView samples but all seems to be failing with nasty runtime errors.
Not sure that I have any relevant code sample :-(
Any help would be gladly appreciated
I've put together a demo that toggles editing, nothing special but it simulates your use case I guess, have a look here.
Hope it helps.
Related
I have a search field, which lets the user search books (filters records, which are retrieved with ember-data).
I have found that any access the store from the results computed property within my component (see jsbin) makes the typing into the search field very slow (noticeable on my PC, and terrible on smartphone).
Here is a screenshot of the Timeline pane when typing a search query. The displayed part show that every keypress causes A LOT of layout (the search field seems to rerendered on every keypress). I also provide the exported timeline which you can load into your dev tools as explained here
I have tried to recreate the issue in a jsfiddle, but it seems to work just fine. The difference might be that in the jsbin I am using fixtures, while in my app I retrieve data from a real API.
I don't understand what is causing this behavior. It may be hard to come to any conclusion from the data I can provide, but does anyone have any ideas? Has anyone experienced similar performance issues?
Update 2014-03-01
I should note that the performance hit only happens if the results computed property contains a call to the store. If I replace it with any other thing (like just returning [], or some random async method -- like $.get) it not display this performance hit.
Additionally, I should make it clear (in case you didn't read the code), that the results computed property is not called on every keypress, but only when the search is submitted.
This is not a Ember/Ember-data bug, but apparently a Google Chrome bug.
I have created a new question regarding the issue here
If you look at my brief history of questions, I've seem to have built up a reputation for asking simple questions that I should have figured out the answers to myself, before wasting people's time. With this one though I'm genuinely stumped and I would greatly appreciate some help, so here goes...
I have a multi select list (will eventually use a jquery plugin to make it pretty) that will be populated based on some user criteria (in my example the options are hardcoded, but an example would be a 13 year old shouldn't be able to see rated "Mature" games in my game store).
Based on some search criteria (let's say we are searching by publisher, games available in a specific country, etc..) The counts for each multi-select item, should update as the search criteria changes and the counts change. (In my example I just change a value with a timer)
Here is the fiddle, http://jsfiddle.net/AMPBb/1/
It seems like there are a few ways I could solve this, like a countBinding on my SelectListItem with a displayText computed property, but I can't actually finish a working example. The first option that has the changing count is very hackerish, but demonstrates the functionality that I'm expecting. I haven't come across an example like this before, so I'm very interested in seeing what the best approach to solving this should be.
Thanks in advance for any help.
I would create a computed property label on your App.SelectListItem which is defined as follows, see http://jsfiddle.net/pangratz666/Y6467/
label: function() {
var text = this.get('text');
var value = this.get('value');
return '%# (%#)'.fmt(text, value);
}.property('text', 'value').cacheable()
Also note that you have to create a valueBinding to your 'App.CountModel.*' in your App.SelectListItem.
One more thing about naming convention: concrete instances should be named in lowerCase, so it's App.countModel. See http://www.emberist.com/2012/04/09/naming-conventions.html.
Say I have a website that has 100 products. Then this is filtered down to 5 sections containing 20 products each. If you were in one of the sections that contained 20 products (e.g. toys), what would be the optimal method to display only 5 toys per page. At the bottom of the list would be next/previous buttons to show the next/previous set of 5 toys.
A better analogy would be google search. There are millions of results but only ~10 are shown at a given time.
So right now I'm using google app engine (python) and django templates. One way I thought of to remedy this problem would be making all the query results go into a div which could then be modified through javascript to give a similar effect. However, if someone were to click their browser's back button, they wouldn't go where they originally came from.
Thanks in advance. Any help would be useful...I don't know what this technique is called so google hasn't been really useful :(
Edit: based on responses, I found my question was solved here: How to use cursor() for pagination?
Look into query cursors. Thay are made to be serialized and sent to client, to be used in creating "next" and "previous" paging requests.
NOTE: don't use offset on queries. This can be VERY expensive, as it actually fetches (and charges) all entities up to offset+limit position, but returns to application only limit results.
I'm not sure that putting all the results as hidden content in the HTML and manipulating it using JS is a very good idea if you might have a large result set (think about what happened if Google used this approach). There's also the back functionality issue that you've mentioned.
So, as for querying a wanted "results page" each time, I think the Google's GQL Reference might help you, take a look specifically at the LIMIT clause, it can help you create the paging mechanism you're looking for by supplying it with the number of items-per-page you want as "count" and the numbers of items-previously-viewed as "offset" (0 at first call).
As for displaying, I think that the Google Images / Facebook News Feed approach might also be interesting to think about (loading on scroll instead of paging), but that's a matter of your personal choice :)
Hope this helps, good luck!
EDIT: After reading Peter's answer, I found it much more efficient to use cursors for pagination, a good reference is given in his answer.
I am listing products as table rows, each row contains input fields for specifying the quantity of products.
I made a Fiddle for it here, http://jsfiddle.net/kroofy/4jTa8/19/
As you can see, after the input in the Qty field have been made, the whole row render again. And because of that the focus of the input field will be lost, which is not good if you want to input more than just one digit, or tab between input fields.
What would be the most elegant way to solve this?
I would handle this by setting model.set({qty: _qty}, {silent: true}) and then updating the non-input fields with this.$.
As an alternative to the silent treatment: rather than listening for change events, listen for change:qty and change:sellPrice and have a method that updates just the HTML that needs updating within this.$, rather than re-rendering the DOM object and breaking your focus.
Either way, your comment about "selective updating" on the fiddle is certainly the right way to go.
(this.$ is a backbone hack to jQuery that restricts all selectors to search only within the DOM of the View's element. The element doesn't even need an ID or class; it just needs to exist and the View maintains a handle to it. It's incredibly useful.)
i built a plugin for backbone called Backbone.ModelBinding that may be able to help in this situation. my plugin allows you to update portions of a view with data from a model, when the model changes.
i've forked / updated your fiddle to show it in action: http://jsfiddle.net/derickbailey/FEcyF/6/
i removed the binding to the model change. i've also added id attributes to the inputs of the form to facilitate the plugin (the attribute that the plugin uses is configurable, though). and lastly, i've added a data-bind attribute to the sell price total td.
you can get the plugin here: http://github.com/derickbailey/backbone.modelbinding/
hope that helps
FWIW: my plugin is an automated version of what Elf is suggesting. I've written code exactly like he is describing, numerous times, which is where the plugin came from. I just got tired of writing that code by hand :)
I need to retrieve institution name by going through an intermediate table. My view gets all the values except this one or at least it is not displaying in the template. Can someone please help with either revising my view or template statement?
http://dpaste.com/122204/
Thank you,
May
To debug these kinds of problems do the following.
Run the view function's processing separate from any template or any other parts of Django.
Either interactively or with a VERY simple script run your query. For example, use a simple script like this to explore your model and make sure your model really works.
from app.models import Contact, Institution, Whatever
results= Researchproject.objects.filter(restitlestrip__icontains='something').distinct()
for project in results:
print project.contact
print contact.institutionname
Note several things about your simple script and your template.
Case matters. Project != project.
Navigation matters. In the script shown above, contact is undefined. project.contact, however, is defined. Perhaps that's what you meant.
Your model appears incomplete. The Contactintermed table doesn't seem to be used anywhere in your query or view. It may have FK's to other tables, but you don't seem to have a sensible navigation from Project through Contact to Contactinterma to Institution.
Get your model to be correct in a stand-alone script. Add the template processing later.
Also, please post all the code here on StackOverflow. Chasing your code down all over the internet is a huge pain. It's far easier to simply ignore your question than it is to chase down your code.