There is something that I do not understand well in backbone's event.
When I defined a view, the "el" element is the element in which my views will be render? (I hope I'm still right here)
And when I put events on the view, backbone listen them only when the event is fired in the "el" element?
In my case I want to create a new view that will be render on click event on an element outside my "el" element.
I'm on the wrong way to it or this is not the good solution ?
Related
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.
What I mean is - I have a directive that is being duplicate on the same page. Lets say it is a grid. I have 3 grids on the same page. Now, each one of the grid is firing event called "Foo" but I want to know which of the grids really fired that event. How can I know that? Is there an id to each of the same directive child's?
If you're broadcasting a DOM event then you can use Event.targetto get the element the event was triggered from and from that you can use angular.element(Event.target).scope() to get the scope of the triggered element. If the triggered element isn't the grid itself but a child of the grid (likely) then you'll need to use jqLite or jQuery to find the grid from the target.
If you're not broadcasting a DOM event, then use your own event object that provides a target property.
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.
What is the best way to let subviews/child views know when they are already in the DOM?
Consider we have following hierarchy of views:
MainView
SubView
ChildView
Here for example MainView is already in the DOM. Then as a part of render process MainView creates SubView which in turns creates ChildView.
As a result ChildView won't be in the DOM until MainView finishes its' rendering. And I need to know (via event or handler) when it is inserted and displayed.
The most straightforward answer is for MainView to trigger some event when it is done rendering. If it were the only case where I needed it - it would be alright. But there are lots of places and in general suddenly subviews dictate their parents what to do, probably not good.
Update:
In what cases this is required? When we are using widgets which expect element to be in the DOM (to get height, etc). In example: Accordion widget, jqGrid. So the correct time to init them when their container is already in the DOM.
I'm not sure what your use case is but I'm assuming its finding a DOM element within the Childview and manipulating it. In this case, it would not matter if its in the DOM or not.
What I typically do is grab the reference to the element - $el
and then find the sub-element
$target = $el.find('.target')
This has the added benefit of only allowing me to grab classes or ids within the ChildView ensuring a proper management of views.
I'm working on a application which has sidebar on the right side. That displays collection. Each model of the collection has select behavior.
In the top center of the page I have one independant backbone view which acts like "info bar" and this view should update it's infomation when I select one of the views in the sidebar
How can I do it? I think that the each view in the sidebar should have "selected" event with model argument, and my question is how can I listen that change in my info bar view in Backbone.js???
This sounds like something that would be served well by an event aggregator pattern. Derick Bailey posted a really nice article on this matter which you can read here.
Event Aggregator Pattern
I extended my Backbone.View so that all views have the event aggregator object available to them like this.
Backbone.View.prototype.eventAggregator = _.extend({}, Backbone.Events);
Basically when your model view is selected, your view.eventAggregator will trigger some custom event.
sidebarView.eventAggregator.trigger('selected', this.model);
or something of this sort. With Backbone events, you can pass parameters through the trigger function to your event listener. In the above example I passed the model with the specific event.
In your main view, you'd be listening for this event.
mainView.eventAggregator.on('selected', myFunction, this);
myFunction: function(model) {
// Some code to execute - model is available through param
}
It's a pretty useful pattern. Just don't forget to unbind the event when you close out your mainView. :-)