I know Marionette calls preventDefault and stopPropagation by default, however, this prevents a menu of mine from closing.
Is there a way to re-enable it?
got lucky with a google query.
Backbone.Marionette.CompositeView.extend({
triggers: {
"click .do-something": {
event: "something:do:it",
preventDefault: true, // this param is optional and will default to true
stopPropagation: false
}
}
});
Related
I have a Backbone Marionette CollectonView that is listening for an event in its child views as follows:
this.on(this, 'itemview:timeline:storyRemoved', this._storyRemoved);
The itemview triggers the event during its onClose:
onClose: function () {
this.trigger('timeline:storyRemoved', { model: this.model });
}
But the _storyRemoved function is never called.
If I move the trigger to onShow then it works fine:
onShow: function () {
this.trigger('timeline:storyRemoved', { model: this.model });
}
I'm guessing it's something to do with the fact that the view has been closed and is therefore not in the collection view any longer?
Any way of getting this to work?
You're right that the view is not listening because it has already been closed when you trigger the event.
Depending on what you're doing, shouldn't the model itself trigger this event? That way, you could add something like this in your collection view:
collectionEvents: {
'remove': '_storyRemoved'
}
As you can see here, Removing a model will trigger a remove event with a reference to the model that was removed.
I like gbsice's point here, and I also wanted to add a more general answer: you can use onBeforeClose rather than onClose if you need something executed prior to the close event.
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#onbeforeclose-callback
So in your case, it would be
onBeforeClose: function () {
this.trigger('timeline:storyRemoved', { model: this.model });
}
I'm just getting my feet wet with Backbone, and I think I have an easy problem to solve. I have the following view which is a simple tab that when clicked opens up a panel and when closed goes back to a tab:
myApp.views.Support = {
Form: Backbone.View.extend({
initialize: function () {
this.el = $('#support');
this._ensureElement();
},
render: function () {
if (this.$el.hasClass('support-panel')) {
// close panel
this.$el.empty();
this.$el.removeClass('support-panel');
this.$el.addClass('support-button');
}
else {
// open and populate panel
var template = _.template(myApp.utils.RenderTemplate('support/default'), {});
this.$el.removeClass('support-button');
this.$el.addClass('support-panel');
this.$el.html(template);
}
return this;
},
closePanel: function () {
alert('close event fired');
},
events: {
'click #SubmitFormButton': 'submitForm',
'click #CloseSupportPanel': 'closePanel'
},
submitForm: function (event) {
alert('form submitted: ' + $('#message'));
}
})
}
Everything is working fine except that "closePanel" gets fired +2 times every time the click event happens. I assume it's some sort of cleanup I'm missing but I don't know what.
Likely its because the event is bubbling up. Try returning false.
I know this is an old question but it helped me realize what my issue was. Returning false as Daniel said works, but the root cause of my issue was having the jQuery selector twice in my markup, resulting in two jQuery objects being created thus the click event fires twice.
I can successfully add a listener to the painted event in the view for a selectfield. But, how do I do this in the controller?
control: {
"#form #field": {
painted: 'onPainted'
}
}
// omitted onPainted method that logs message in console
This doesn't work. However, directly adding a listener in the view works.
// in the view for the selectfield (works)
listeners: {
painted: function() {
console.log("Painted");
}
}
What am I missing?
From a comment in the docs:
This event is not bubbled up to the controller, "for performance reasons".
In my view, I have following bindings:
events:
{
'click #showallconsumers': 'showAllConsumers',
'submit form': 'submit',
'click #allconsumerstable tbody tr': 'selectConsumer',
},
In showAllConsumers function, I need to disable click on #showallconsumers anchor, fetch collection and rebind click event on #showconsumers after fetching finished.
showAllConsumers: function()
{
$(this.el).undelegate('#showallconsumers', 'click');
this.collection.fetch(({async: true, success : this.renderAllConsumers}));
},
renderAllConsumers: function(collection)
{
//i'm populating table with data from collection
$('#showallconsumers').bind('click', this.showAllConsumers);
},
When I click on #showallconsumers anchor, undelegate works, but when fetching is finished, .bind(...) can not rebind event. I also tried with .delegate(...).
The success function of fetch isn't getting called with the view as its context, so this.showAllConsumers isn't pointing to your function.
When calling fetch wrap the success function in Underscore's bind so that this points to your view:
this.collection.fetch(({async: true, success : _.bind(this.renderAllConsumers, this)}));
I'm trying to prevent full page reloads using Backbone's pushState. When I call navigate() from my view's event, I see the messages marked // 1 below, but not // 2. In addition, when I try to open the same tab, the page reloads again.
Must I stop the event myself? I tried using jQuery's preventDefault(), which does prevent the page reload, but I haven't seen this documented anywhere.
Below is my current code:
App.Router = Backbone.Router.extend({
routes:{
"analytics":"analytics"
, "realtime":"realtime"
}
, analytics:function(page) {
console.log("analytics route hit: %o", page); // 2
}
, realtime:function(page) {
console.log("realtime route hit: %o", page); // 2
}
});
App.TabSetView = Backbone.View.extend({
initialize:function() {
this.collection.bind("reset", this.render, this);
this.collection.bind("add", this.render, this);
this.collection.bind("change", this.render, this);
this.collection.bind("remove", this.render, this);
}
, events:{
'click li.realtime a': "onRealtime"
, 'click li.analytics a': "onAnalytics"
}
, render:function() {
// omitted for brevity
}
, onAnalytics:function() {
console.log("onAnalytics"); // 1
if (this.collection.activateAnalytics()) {
App.app.navigate("analytics", true);
this.render();
console.log("navigated");
} else {
console.log("do nothing"); // 1
}
}
, onRealtime:function() {
console.log("onRealtime");
if (this.collection.activateRealtime()) {
App.app.navigate("realtime", true);
this.render();
console.log("navigated");
} else {
console.log("do nothing"); // 1
}
}
});
var tabs = ...; // omitted for brevity
var tabSetView = new App.TabSetView({collection: tabs});
var App.app = new App.Router;
Backbone.history.start({pushState:true});
to stop the page reload when a user clicks a link, you have to call e.preventDefault() like you were suggesting.
MyView = Backbone.View.extend({
events: {
"click .some a": "clicked"
},
clicked: function(e){
e.preventDefault();
// do your stuff here
}
});
you're also right that this isn't documented in the backbone docs. events are handled by jQuery, though. so you can assume that any valid jQuery things you would do - such as have an e parameter to an event callback - will work with backbone's events.
as for this:
in addition, when I try to open the same tab, the page reloads again.
are you saying when a user opens a new browser tab to your site's url? if so, then there's nothing you can do about this. when the browser opens the tab it makes the request to the server to load the page.
if you're referring to a "tab" as part of your site's user interface, though, then the use of e.preventDefault() on your link / "tab" clicks should take care of that.
The answer is actually in here https://stackoverflow.com/a/9331734/985383, if you enable pushState you want links to work and not prevent them as suggested above, or well, is not just preventing them. here it is:
initializeRouter: function () {
Backbone.history.start({ pushState: true });
$(document).on('click', 'a:not([data-bypass])', function (evt) {
var href = $(this).attr('href');
var protocol = this.protocol + '//';
if (href.slice(protocol.length) !== protocol) {
evt.preventDefault();
app.router.navigate(href, true);
}
});
}
$('a').click(function(e){
e.preventDefault();
Backbone.history.navigate(e.target.pathname, {trigger: true});
});
Just a follow up to Derick answer.
It worked for me, but to keep it clean, I overwrote the Backbone.View class:
(coffeescript)
class NewBackboneView extends Backbone.View
events:
'click a' : 'pushstateClick'
pushstateClick: (event) ->
event.preventDefault()
Backbone.View = NewBackboneView
So every link from my backbone views have the prevent default.
It depends on how you've generated the HTML mark-up. It looks like you're using anchor tags (<a>), so if those anchor tag href have values or even an empty string, then you need to cancel the default browser behavior otherwise you'll get a page reload. You can cancel the default behaviour using jQuery're event.preventDefault() like you mentioned. Alternatively, if you're not concerned about progressive enhancement or SEO, then you can set your anchor tag href to # or javascript:void(0);, which will also prevent to the page from reloading. e.g.
Click me
or
Click me