| Page 1 of 1 | [ 10 posts ] |
|
Hi everyone,
I have a view that renders a list of selectable items. When a user clicks on an item, the item is no longer selectable. This occurs by updating the model and re-rendering the view every time a user clicks on an item. The problem I'm running into is that the list is long and I need to make it scrollable. But when I scroll down to select an item (at the end of the list) and the view rerenders, then I'm back at the top of the list. I'm looking for some suggestions on how I could keep the current scroll position across rendering the view. Thanks. |
|
don't know if this method is outdated! but could you not have anchor tags on each item and then set an 'on available' in the render method to navigate to the chosen one? Since it is just a named anchor the page would just scroll to it?
|
|
I haven't thought of that. It sounds like a decent solution for the current predicament I'm in. Hmmm... wasn't there a scroll into view utility that YUI provided...
|
|
Ah hah! Found it
http://yuilibrary.com/yui/docs/api/clas ... llIntoView So I guess that's how I should handle it. Keep track of what was last clicked and after the render finishes, scroll to the element last clicked |
|
The `scrollIntoView()` method will work, like you figured out; but you might also want to consider not re-rendering the _entire_ list if you're just updating one item in that list.
|
|
Hey Eric,
Yeah, I thought about updating one item, but I initially resisted that approach b/c it's so much more convenient to update the model and render the whole view and also, (possibly short of creating a sub view for each of the items that can be clicked), I'd have to concatenate and parse HTML IDs to form the css selectors I need in order to manipulate that one item I'm interested in. I actually already implemented this UI using vanilla jQuery and I wanted to avoid string manipulation to form selectors and parsing IDs to recreate selectors as much as possible. For example... Code: <li id="ptChannelId_9" class="selectableListItem" >channel9</li> Code: var channelElementSelector = '#' + e.target.get('id'), Since my class is pretty simple, I tried implementing just updating one element and it's not too bad. A few extra lines in 2 methods. Oh well, compromises...channelNode = Y.one(channelElementSelector); |
|
Daniel,
ModelLists are ordered, so if your view is already rendering out a ModelList, you could simply select the n-th child node at the particular index the updated model is at in the model list, and update that node. |
|
Hmm, I am using a model list fortunately
So are you suggesting that I keep a node reference or a css selector reference in the model? And how could I more cleanly tie a click event with the particular model I want from the modelList - aside from performing string parsing and concatenation? |
|
Eric,
Based on your post, I ended up refactoring my code given the hunch I had. I like this approach. I had to move the logic that actually deals with the nodes and altering the state into the model and during the view's init, the models in the model list are initialized with the css selector to create a node instances. So on a click event, the callbacks 1. parse the model's id from the node clicked 2. grab the model by ID from the modelList 3. call model.toSelectedState() or model.toAvailableState() - the model has the css selector and can now change the single node and there is no need to render the entire view again. I know the Y.App uses the MVVM paradigm, but working with MVVM is still new to me. I'm so used to working with MVC or using a Presentation Model with MVC. But given the architecture that Y.App lends itself to (MVVM), I guess it's fine that the model.toSelectedState() or model.toAvailableState() are in the Model class and not the Y.View or some form of a controller... |
|
Daniel,
Great to hear. I'd hope you could use the App Framework components to create any number of MV* configurations. That way you can create the best architecture for your needs. I experimented with an MVP approach a while back, you might find it useful: https://github.com/yui/yui3/blob/master ... enter.html (Note: this is something I just through together one afternoon as a POC) |
| Page 1 of 1 | [ 10 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group