I have a layout view that works perfectly. Inside one of the four child views there is a button to create an "event". When clicked I'd like the child view to be replaced by a separate add event view.
I am unsure whether the add event view would be fired in the main layout logic or within the child view.
index.js (layout parent view)
define([
"marionette",
'app/views/images/collection',
'app/views/topPosts/collection',
'app/views/clients/collection',
'app/views/events/collection',
"tpl!app/templates/index.html"
],
function(Marionette, ImagesView, TopPostsView, ClientsView, EventsView, template) {
"use strict";
var AppLayout, layout;
AppLayout = Backbone.Marionette.Layout.extend({
template: template(),
regions: {
collection1: '#images',
collection2: '#topPosts',
collection3: '#clients',
collection4: '#events'
},
onRender: function() {
this.collection1.show(new ImagesView())
this.collection2.show(new TopPostsView())
this.collection3.show(new ClientsView())
this.collection4.show(new EventsView())
}
})
return new AppLayout()
})
event/collection.js (which I believe would fire the replacement view over itself)
define(["marionette", "text!app/templates/events/collection.html", "app/collections/events", "app/views/events/item", 'app/views/events/create'], function (Marionette, Template, Collection, Row, CreateEventView) {
"use strict"
return Backbone.Marionette.CompositeView.extend({
template: Template,
itemView: Row,
itemViewContainer: "ul",
events: {
'click #createEvent': 'onClickCreateEvent'
},
onClickCreateEvent: function () {
//render create form over the events collection
},
initialize: function () {
this.collection = new Collection()
return this.collection.fetch()
}
})
})
event/item.js (model view for the collection above)
define(["marionette", "text!app/templates/events/item.html"], function(Marionette, Template) {
"use strict";
return Backbone.Marionette.ItemView.extend({
template: Template,
tagName: "li"
})
})
I tried putting this inside event/collection.js, but it just wiped out the item views
onClickCreateEvent: function () {
this.$el = new CreateEventView().$el
this.$el.render(); return this;
},
The event will be fired in the view that contains the element that is clicked. However, the event will propagate up to the parent view as long as you don't call stopPropagation() on the event. The CompositeView should not be in charge of replacing itself, though; that responsibility should be given to the parent view (AppLayout I believe). One way to handle the swapping of views is this:
// index.js
AppLayout = Backbone.Marionette.Layout.extend({
...
events: {
'click #createEvent': 'onClickCreateEvent'
},
...
onClickCreateEvent: function(e) {
this.collection4.show(new CreateEventsView());
},
...
One disadvantage to this approach is that the DOM element you are binding the event to isn't directly related to that Layout's template.
Related
I have a view that contains two sub views, each with their own HTML template.
It works fine for what I have now. However, I now need an event to be fired from one subview to the other.
For example, when the user is in the Edit View, and they forget to click something(checkbox, radio button, or whatever), and they go back to the Display View, I want a warning to show up in that display view template(html) that warns them of the things they missed.
Is this possible? To pass events around like this between sibling views?
Thanks!
Here's the basic code structure I have now:
return Backbone.View.extend({
render: function(SubView) {
SubView = SubView || DisplayView;
this.view = new SubView({
model: this.model
});
this.$el.html(this.view.render().$el);
return this;
}
})
var DisplayView = Backbone.View.extend({
render: function() {
this.$el.html(this.template(this.model.toJSON()));
})
var EditView = Backbone.View.extend ({
toggleDisplay: function () {
this.checkAllItems();
},
checkAllItems: function() {
if (this.$('.engineParts').val().length > 0) {
this.render(DisplayView);
} else {
this.$('.awarning').css('display', 'block'); //warning class in DisplayView template.
this.render(DisplayView);
}
}
})
The problem I am having is click events keep piling up (still attached after changing the view). I have fixed the problem by only having one instance of the view (shown below). I thought backbone got rid of events when the markup is changed. I haven't had this problem with other views.
BROKEN CODE: Click events keep piling up on loadPlayerCard as more views are created.
//Player Thumb View
PgaPlayersApp.PlayerThumbView = Backbone.View.extend({
events: {
'click': 'loadPlayerCard'
},
tagName: 'li',
template: _.template( $('#player_thumb').html()),
render: function()
{
this.$el.html(this.template(this.model.toJSON()));
return this;
},
loadPlayerCard: function()
{
new PlayerCardView({model: this.model}).render();
return false;
}
});
//Router
var Router = Backbone.Router.extend({
routes:{
'': 'loadPlayers'
},
loadPlayers: function()
{
PgaPlayersApp.Players.fetch({reset: true, success: function()
{
//When players is first fetched, we want to render the first player into the card area
new PlayerCardView({model: PgaPlayersApp.Players.first()}).render();
}});
}
});
PgaPlayersApp.Router = new Router();
Backbone.history.start();
FIXED CODE: Code that fixes the problem:
PgaPlayersApp.CurrentPlayerCard = new PlayerCardView();
//Player Thumb View
PgaPlayersApp.PlayerThumbView = Backbone.View.extend({
events: {
'click': 'loadPlayerCard'
},
tagName: 'li',
template: _.template( $('#player_thumb').html()),
render: function()
{
this.$el.html(this.template(this.model.toJSON()));
return this;
},
loadPlayerCard: function()
{
PgaPlayersApp.CurrentPlayerCard.model = this.model;
PgaPlayersApp.CurrentPlayerCard.render();
return false;
}
});
//Router
var Router = Backbone.Router.extend({
routes:{
'': 'loadPlayers'
},
loadPlayers: function()
{
PgaPlayersApp.Players.fetch({reset: true, success: function()
{
//When players is first fetched, we want to render the first player into the card area
PgaPlayersApp.CurrentPlayerCard.model = PgaPlayersApp.Players.first();
PgaPlayersApp.CurrentPlayerCard.render();
}});
}
});
PgaPlayersApp.Router = new Router();
Backbone.history.start();
PlayerCardView (For reference):
var PlayerCardView = PgaPlayersApp.PlayerCardView = Backbone.View.extend({
events: {
'click': 'flipCard'
},
el: '#pga_player_card',
template: _.template( $('#player_card').html()),
render: function()
{
this.$el.html(this.template(this.model.toJSON()));
return this;
},
flipCard: function()
{
this.$("#player_card_container").toggleClass('flip');
}
});
In your router you keep creating new PlayerCardViews:
new PlayerCardView({model: PgaPlayersApp.Players.first()}).render();
All of those views share exactly the same el:
el: '#pga_player_card'
So you keep creating new PlayerCardViews and each one binds to #pga_player_card.
Every time you do that, you bind a brand new view to exactly the same DOM element and each of those views will call delegateEvents to bind the event handlers. Note that delegateEvents binds to el and that jQuery's html method:
removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
So html does nothing to el but it will remove event handlers from child elements. Consider this simple example with <div id="d"></div>:
$('#d').on('click', function() {
console.log('Before .html');
});
$('#d').html('<p>Where is pancakes house?</p>');
$('#d').on('click', function() {
console.log('After .html');
});
If you then click on #d, you'll see both the before and after messages in the console.
Demo: http://jsfiddle.net/ambiguous/ftJtS/
That simple example is, more or less, equivalent to what you're doing.
You'll have a better time if you:
Put the view inside #pga_player_card and let the router do $('#pga_player_card').append(view.render().el).
Keep track of the view that's already there and view.remove() it before adding the new one.
Avoid trying to reuse DOM elements for multiple view instances and avoid trying to reuse views, neither is worth the hassle.
I am having an application layout like the one attached. The upper panel is already to the page (i.e. in the server's HTML response). While the user interacts with the elements in that panel the content of the dynamic panel below changes accordingly.
I've studied Backbone Marionette various View types and Region Manager. But I still can't figure out a way to implement this. I need to capture events from the already rendered elements and change the dynamic content accordingly. As I understand, every time a region is created to show a specific Marionette view, the region's content is replaced by that view's el. And with that I cannot have a Layout view for the container of the whole thing.
So can this be done in anyway using Marionette?
You can certainly support what I would call a "pre rendered" or partial view. In fact, here's a Marionette View that I use quite a bit, as I'm working under with an app that includes server side partial views:
My.PartialView = Backbone.Marionette.Layout.extend({
render: function () {
//noop
if (this.onRender) {
this.onRender();
}
return this;
},
onShow: function () {
// make sure events are ready
this.delegateEvents();
}
});
It's simple to use:
My.NavBar = My.PartialView.extend({
events: {
"change #search-input": "searchRequested",
"click #faq-link": "faqRequested",
"click #home-link": "homeRequested",
},
searchRequested: function (e) {
// search
},
faqRequested: function (e) {
// show the faq
},
homeRequested:function () {
// go home
}
});
var navbar = new main.views.NavBar({ el: ".my-nav" });
someRegion.show();
// or, just wire up the events manually
navbar.delegateEvents();
I think the better way is using constructor.
Make your rendered layout class.
App.RenderedLayout = Marionette.Layout.extend({
render: function () {
if (this.onRender) {
this.onRender();
}
return this;
},
constructor: function(){
this._ensureElement();
this.bindUIElements();
Marionette.Layout.prototype.constructor.apply(this, slice(arguments));
}
});
Then you can use full of Marionette capabilities.
App.module('Some.Page', function (Mod, App, Backbone, Marionette, $, _) {
Mod.SomeLayout = App.RenderedLayout.extend({
el: '#renderedDiv',
events: {
'click .something': 'onSomethingClick'
},
regions: {
'innerRegion': '#innerRegion'
},
ui: {
something: '.something div'
},
initialize: function () {
},
onSomethingClick: function(e){
return false;
}
});
Mod.addInitializer(function(){
App.addRegions({renderedRegion: '#renderedDiv'});
Mod.someLayout = new Mod.SomeLayout();
App.renderedRegion.attachView(Mod.someLayout);
});
});
I have a Marionette CompositeView with a search panel and the collection of result data.
I would like to call a function when:
the search panel is rendered.
the collection is not rendered yet.
this function should not be called when the collection is rendered.
I did it in this way: (but "afterRender" function get called twice)
// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
// TEMPLATE
template: Handlebars.compile(templates.find('#composite-template').html()),
// ITEM VIEW
itemView: App.Item.View,
// ITEM VIEW CONTAINER
itemViewContainer: '#collection-block',
//INITIALIZE
initialize: function() {
this.bindTo(this,'render',this.afterRender);
},
afterRender: function () {
//THIS IS EXECUTED TWICE...
}
});
How can i do this?
==========================EDIT==================================
I solved it in this way, if you have an observation please let me know.
// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
//INITIALIZE
initialize: function() {
//this.bindTo(this,'render',this.afterRender);
this.firstRender = true;
},
onRender: function () {
if (firstRender) {
//DO STUFF HERE..............
this.firstRender = false;
}
}
});
Marionette provides an onRender method built in to all of it's views, so you can get rid of the this.bindTo(this, 'render', this.afterRender) call:
// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
// TEMPLATE
template: Handlebars.compile(templates.find('#composite-template').html()),
// ITEM VIEW
itemView: App.Item.View,
// ITEM VIEW CONTAINER
itemViewContainer: '#collection-block',
//INITIALIZE
initialize: function() {
// this.bindTo(this,'render',this.afterRender); // <-- not needed
},
onRender: function () {
// do stuff after it renders, here
}
});
But to get it to not do the work when the collection is not rendered, you'll have to add logic to the onRender method that checks whether or not the collection was rendered.
This largely depends on what you're trying to do with the rendering when no items are rendered from the collection.
For example... if you want to render a "No Items Found" message, you can use the built in emptyView configuration for the composite view.
NoItemsFoundView = ItemView.extend({
// ...
});
CompositeView.extend({
emptyView: NoItemsFoundView
});
But if you have some special code that needs to be run and do certain things that aren't covered by this option, then you'll have to put in some logic of your own.
CompositeView.extend({
onRender: function(){
if (this.collection && this.collection.length === 0) {
// do stuff here because the collection was not rendered
}
}
});
Just use onShow function
Backbone.Marionette.ItemView.extend({
onShow: function(){
// react to when a view has been shown
}
});
http://marionettejs.com/docs/marionette.view.html#view-onshow
My Backbone.js app has a popup editor view that will be repeatedly closed and reopened as the user makes changes. I'm trying to figure out the cleanest way to implement this, and I'm stuck on an event delegation issue.
I believe the problem lies in the way I'm applying the template in my render method. I haven't had any issues with getting events to fire in other views, but those views differed in that they had a model. The view I'm having issues with is more of an application view that contains sub-views, so I'm not sure how to pass the view's context to the MyApp view.
Here's my code:
MyApp = Backbone.View.extend({
tagName: 'div',
template: _.template($('#app-template').html()),
initialize: function() {
_.bindAll(this);
this.render();
},
render: function() {
$('#container').html(this.template);
return this;
},
events: {
"click .save" : "onSaveClicked"
},
onSaveClicked: function () {
console.log("Save clicked.");
this.$el.remove();
}
});
$('#show').click(function () {
var myapp = new MyApp;
});
I've also posted it as a jsFiddle.
I stepped through the Backbone.js source, and it appears that render is called first, then events are assigned, which is what I'd expect. Everything looks OK from what I can tell, but onSaveClicked never fires when I click Save.
The desired functionality is that clicking Show displays the form and Save removes it. If there's a better way to do this that's more inline with Backbone's underlying philosophy I'm open to that as well. You'll notice that I'm nesting an unnamed div inside container, and that's because I wanted to maintain a consistent anchor point for my popup.
The events are bound to the view el, but you never append the el to the DOM. Try
MyApp = Backbone.View.extend({
tagName: 'div',
template: _.template($('#app-template').html()),
initialize: function() {
_.bindAll(this);
this.render();
},
render: function() {
this.$el.html(this.template);
return this;
},
events: {
"click .save" : "onSaveClicked"
},
onSaveClicked: function () {
console.log("Save clicked.");
this.$el.remove();
}
});
$('#show').click(function () {
var myapp = new MyApp;
$("#container").append(myapp.$el);
});
http://jsfiddle.net/WBPqk/18/
Note that in your Fiddle you bound the click event to .save where your template uses a done class.