PDA

View Full Version : Question on routing



horcle_buzz
4 Mar 2013, 7:53 PM
Dear Collective Wisdom,
I am having issues with trying to convert over a backbone.js app to ST. In my old app, I had the following 2-controls to choose a category (which would then get rendered via an underscore template to the appropriate HTML view):



<div data-role="content">
<h2>Select Category to View:</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#category?evaluationNotComplete" class="evaluationNotComplete">Evaluate a Site</a>
</li>
<li>
<a href="#category?evaluationComplete" class="evaluationComplete">Load Evaluation to Remote</a>
</li>
</ul>
</div><!-- /content -->


When clicked, these would get routed as follows:



routes: {
'':'main',
'category?:categoryType':'loader',
'evaluationNotCompleteForm':'evaluate',
},


And thus, using the variable "type," I would filter out the data from my collection to bind to the appropriate list view within the launch action. (For source, see: https://github.com/GregSilverman/evaluate-it/blob/master/assets/www/js/routers/mobileRouter.js)

In Sencha Touch, I know I can do something similar, but am not sure exactly how or where to implement this. Looking at the Kitchen Sink, I would like to create this using the List view, some how routing this in the route defined in Main.js, but I am having a heckuva time setting the value of type in the call


routes: {
'demo/:id/:categoryType': 'showViewById',
'menu/:id': 'showMenuById'
},

Is this possible? Where would I set this value of like I did in my HTML above? Is this an attribute of the List node in the Kitchen Sink -> User Interface branch? Something like


{
text: 'List',
leaf: true,
id: 'list',
categoryType: 'evaluationNotComplete'
},


would be really nice (although I have no clue as to how to set a custom attribute here).

Danke Schoen!

Greg--

horcle_buzz
5 Mar 2013, 11:08 AM
I think I found my answer through use of extraParams...

Greg--

horcle_buzz
5 Mar 2013, 7:38 PM
Alright, I am slightly confused. More detailed background: I am trying to extend the routing in the Sencha Touch Kitchensink app as follows:

My data (in List store) are as follows:


{ category: 'fruit', str: 'tomato'},
{ category: 'fruit', str: 'green bean'},
{ category: 'vegetable', str: 'celery'},
{ category: 'vegetable', str: 'sprouts'},
{ category: 'notAVegetable', str: 'ketchup'},
{ category: 'notAVegetable', str: 'prune'}


I would like to show only those data selected by a particular category, such as "fruit"

In the Main.js controller, I am trying to do this by grabbing another parameter from the "List" node in the Demos TreeStore



routes: {
'demo/:id/:category': 'showViewById',
'menu/:id': 'showMenuById'
},


So that in the ViewById action, the extra parameter, category would be available for use later



showViewById: function (id, category) {
var nav = this.getNav(),
view = nav.getStore().getNodeById(id);

console.log('view ' + id);
this.showView(view);
this.setCurrentDemo(view);
this.hideSheets();

// do stuff with category
},


I am trying to add and access 'category' as an extraParameter in Demos.js store in the "List" tree node as follows:



{
text: 'List',
leaf: true,
id: 'list',
extraParams: {
category: 'fruit'
}
},




A few questions: Can I use an extraParameter to add this attribute to the Store? If so, how can I access it to use for my routing? I thought it would be available as metadata for my Demos store, but have not been able to access it.


Any alternatives short of creating multiple stores (one for "fruit", "vegetable", "notAVegetable" with filters on them to achieve the same thing?

Thanks!

Greg--