I have a view where i have 3 links(routers which have methods triggering a View bound event).
Normally based on the link i click i reduce from the main collection a subset and render it in another VIEW.
But suppose i have clicked on a link say '....#/remaining' and then i click again on the same link, the event bound is not triggered.
But when i click on any other link and click back on the desired link, everything works!
Is this a Backbone feature/defect, if so what are the alternatives to work around this?
Thanks in Advance.
I think this is because you're doing the reduce in the Router. When you're already on #remaining, your route handler won't execute because there's no route change at all.
Instead of that, you could use a View UI event on the link to manipulate the collection, so it will always be called no matter if you're already on that route or not.
You could also use events as a communication method between your app's components: your data, your views, and so on.
Hope it helps, I didn't put any code because you didn't either. :)
Related
What is the best way to switch to a different view when user navigates to a different url. In angular there is ng-view that takes care of this and inserts corresponding templates and in ember its all route based.
Is it better to just hide other views elements on routing using css or destroying other views and inserting current view?
EDIT
It would be great if someone could give an example how to re-render the view on navigating back to it again and restoring its previous state.
Eg.
if you have a check-box in a view that user can select to add some item to the cart , but in the middle he/she moves to some other url and then comes back, that check-box should be checked.
I would have a main content view with subviews and call remove on it, which is responsible for cleaning up any subviews too (calling remove on them first and going up the hierarchy tree). The concept of subviews doesn't come for free with backbone but isn't hard to implement. And finally attach a new content view.
This ensures you can cleanup and the browser is using a consistent amount of resources.
I would abstract this into some kind of layout view which has a content subview and a function like setContent(view) which handles the remove of any existing content view and the attach of the new one.
Personally I would have a router with sub routers in modules, e.g. a main router which finds a route starting with "checkout" and passes it over to a sub router in the checkout module which is responsible for attaching a new content view.
In Backbone the implementation is up to you which is both good and bad, depending on how nice you do it ;)
Always remove the view as opposed to just hiding it. If you don't remove (and unbind) your views properly, all bindings, handlers and references to models/DOM elements will linger around.
Depending on the size of your app, you can have a module that handles layouts (as suggested by dominic-tobias), or have a method on the router that takes care of this for you. At its most basic, this method (let's call it _switchView) takes a view and holds onto an instance of the currentView. Upon view change, it removes the current view, sets the new view to the current view and then renders it to the DOM.
Something like this:
_switchView(view) {
this.currentView && this.currentView.remove();
this.currentView = view;
this.$rootEl.html(view.render().$el);
}
In below example it has two buttons "Add" and "ClearAll".
`http://jsfiddle.net/naveencgr/L3orucjm/3/`
"Add" button is inside the template which is loaded by backbone on view render and Clear All button is loaded normally as in html.
I had events for both the buttons in view, but click event on normally loaded button is not working . Why?
i have seen this question asked in backbone github forum. I thibk it is designed this way. each backbone view events only involved with items inside the view.
in order to use the outside event you either put thie inner view into theoutter view or simple use jquery event for it. basically backbone authors believe this is more elegant and secure and this will not be changed at least for now.
I have page with three columns,details of each of the columns are as follows(in the attached image)
![Image showing column desc for the jspx page1
The use case is :I want to display one of the jsff's in the second &one in the third column based upon the tree node selected.
The approach i used is to generate a contextual event on tree node click with payload and a subscriber for the same for second and third column ,Now while trying to use the router to render the content conditionally,i'm failing .
The router gets invoked only for the time page loads and second time the control does not even go the router ,can anyone tell me what is that I'm missing here to achieve the use case.
Jdev version :11.1.1.7.1
Thanks.
Contextual events are done in the view so once the event hit the taskflow, your router will already been evaluated and your contextual event gets passed on to the current view.
It doesn't make the TF to initialize again.
Something you could do, it when the events triggers inside the TF view, you need to fire an action which points to the router.
So in your event handler you just navigate to your router.
Have a look at this one for navigation: https://blogs.oracle.com/jdevotnharvest/entry/how-to_navigate_in_bounded_task_flows
If you tree is in the parent jspx page you don't really need contextual events to manipulate taskflows. Just pass required data as taskflow's parameter and set Refresh property to IfNeeded for your taskflow binding to rerun your taskflow when its parameters changed.
If your tree also resides in taskflow and its sibling taskflow for details view then you indeed need contextual event, that should be catched at the parent jspx page (or taskflow) and then follow approach I've described earler with only change that parameter will come not from tree directly, but from payload of event.
Adding the view to dom id main-wrapper one router calls the view.Page loads one by one because of the sub view added in within main-wrapper. Need to know something similar to smooth loading the dom with fade in effect or shows the page once the dom is loaded.
Another approach you can take is hold off on adding the view to the main-wrapper until all subviews are created. Create a document fragment (default behavior if "el" is not defined). Once your view and its descendent views are all created in document fragment, then add it to the main-wrapper div. This way all of your content are shown at the same time instead of one view at a time.
Either use jQuery's onReady event or the native window.onload event. In both cases you register a callback function that then kicks of the initialization of the respective Backbone views.
I have a List view and a Detail view.
In list view, I have set up the jquery infinite-scroll plugin.
When a user clicks an item, I render the detail view. The problem is when the user hits bottom of the page, the infinite-scroll callback is fired.
I tried calling $.infinitescroll('pause') but it won't stop the fetch.
Should I completetly destroy the list view before rendering the detail view?
If so, how can I completely destory it? (I tried https://stackoverflow.com/a/11534056/433570 but didn't stop the infinite-scroll callback)
My code resembles https://github.com/joshbohde/django-backbone-example in a big picture
Have you tried doing event.stopPropagation on the scroll event inside the Detail view?