I'm trying to implement a simple toolbar using Backbone.js. I have the following simple Backbone code:
var Toolbox = Backbone.View.extend({
el: $("#toolbox ul"),
initialize : function() {
_.bindAll(this, "addOne");
toolCollection.each(this.addOne);
},
addOne : function(tool) {
var view = new ToolView({ model: tool });
$(this.el).append(view.render().el);
}
});
// Tool model and collections
var Tool = Backbone.Model.extend();
var toolCollection = new Backbone.Collection([
new Tool({
tool: "toolName1"
}),
new Tool({
tool: "toolName2"
})
]);
// The view of the individual tools
var ToolView = Backbone.View.extend({
tagName: "li",
template : _.template($("#tool-template").html()),
events: {
"click #toolbox ul li a": "toolClick"
},
initialize : function() {
_.bindAll(this, "render", "toolClick");
this.model.view = this;
},
render : function() {
var mj = this.model.toJSON();
$(this.el).html(this.template(mj));
return this;
},
toolClick : function() {
console.log("Tool clicked");
}
});
var tb = new Toolbox;
So, with this, I have a question. I obviously need to handle each click on a tool differently.
When I instantiate my view, can I bind a specific click event to handle the click of that specific tool, and if so, where would I write the click event at? I'm not even sure if I'm missing something here, but could anyone suggest a pattern of how I can have a group of related, but different views and how to handle the click of view separately? Any help would be appreciated. Thanks in advance.
I hope I understood you right.
You have a toolbox with different tools. And of course you have to handle clicks on different tools differently.
So, why don't you have all the click events in the ToolBox view with IDs attached to the tools.
events: {
"click #toolbox #zoom": "zoomClick",
"click #toolbox #pen": "penClick",
"click #toolbox #line": "lineClick"
}
You can have the tools created in the ToolBox render() function. Hope that helps.
Another way to handle this. You are already capturing the click on the individual tools and passing it to the toolclick function. The function is aware of the model that was clicked you could just pass it to a switch statement to create your separate behavior.
toolClick: function() {
var toolname = this.model.get("tool");
switch(toolname) {
case "toolName1":
//Do something;
break;
case "toolName2":
//Do something else;
break;
}
}
This way you don't have to do a bunch of prep in render or templates.
If your tool is the same but does something different than the other tools, then you need to create that separate tool by extending your "vanilla" tool. With extend you can either add new properties and functions or override them entirely.
var ExtendedToolView = ToolView.extend({
toolClick: function() {
console.log("Extended Tool clicked");
}
});
Related
I've been thrown into a Backbone code base and one of the modifications I need to make requires duplicating a text element with typeahead. Rather than copy and paste code, I'd like to re-use the event code but as I know hardly anything about Backbone I'm not sure how this should be done. Should it be a helper? If so, where do I put the helper code so it can be used by both views? I'd rather not attempt view inheritance if at all possible because I'd like to keep the changes as simple and minimal as possible.
events: {
// all other events removed for conciseness.
'typeahead:selected #ud_producerid': 'producerChanged'
}
I need the same event with the identical functionality in the producerChanged function as well as the setupBindings code that wires up the typeahead to work in 2 different views.
I know you said you didn't want to use inheritance here but it is easy in Backbone and well suited to the task.
var TypeaheadBase = Backbone.View.extend({
events: {
'typeahead:selected #ud_producerid': 'producerChanged'
},
producerChanged: function(e) {
...
},
anotherBaseMethod: function() {
...
}
});
var TypeaheadBaseA = TypeaheadBase.extend({
someOtherAMethod: function() {
...
},
// You can do some extra functionality on `producerChanged`.
// (Or you can override by not calling the Base prototype).
producerChanged: function() {
TypeaheadBase.prototype.producerChanged.apply(this, arguments);
// Do some additional stuff.
}
});
var TypeaheadBaseB = TypeaheadBase.extend({
// You can also extend things like events, which could be a hash (Object).
events: function() {
var parentEvents = _.result(TypeaheadBase.prototype, 'events');
return _.extend({}, parentEvents, {
'click a': 'someClickEvent'
});
},
someClickEvent: function() {
...
}
});
I have two views each bound with their own collections. i have a save button on the screen on third view.
How can i save both the collections in single save click?
You didn't provide any code to help us answering you, but I'll try to help. Here is some code that you could implement:
var View3 = Backbone.View.extend({
events: {
'click .saveButton' : 'saveCollections'
},
initialize: function(view1, view2) {
this.view1 = options.view1;
this.view2 = options.view2;
},
saveCollections: function() {
this.view1.collection.save();
this.view2.collection.save();
}
});
You'll need to pass as params your previous views (View1 and View2) in the instantiation of your View3.
Previously, I made a backbone view for handling a toggle button:
Star = Backbone.View.extend({
events: {
'click': 'toggle'
},
toggle: function() {
this.$('i').toggleClass('icon-star').toggleClass('icon-star-empty');
},
status: function() {
return this.$el.hasClass('active');
}
});
And i was using this subview in my views like this:
initialize: function() {
var star = new Star({ el: this.$('.new .btn.star') });
// ...
}
This way i can reuse this subview in many other independent views in backbone. (FYI: I'm no backbone expert. This code also can be wrong. Please correct me if it's wrong.)
Now i'm trying to learn Backbone.Marionette and i couldn't find a good way to accomplish same functionality. How can i use this view in my ItemViews and/or CompositeViews?
You can keep the exact same idea, just extend (e.g.) a Marionette ItemView:
Star = Marionette.ItemView.extend({...});
and then
var star = new Star({ el: this.$('.new .btn.star') });
Another option is to extend your Star view:
MyView = Star.extend({...});
I'm using the Backbone Layout Manager Boilerplate. Unfortunately, a quite frustrating bug occurred. I like render a list of items as subviews inserted by insertView function. At the first load everthing works fine. But after a reload the the click events doesn't work anymore :(. I already tried to call delegateEvents() on the TableItem View manually but nothing changed. I hope anyone can give me a clue.
App.Views.Item = Backbone.View.extend({
template: "templates/item",
tagName: "li",
events: {
"click .applyButton" : "apply",
"click .viewDetailsButton" : "showDetail"
},
serialize: function() {
return { table : this.model.toJSON() };
},
apply: function(ev) {
ev.preventDefault();
alert("apply button clicked");
},
showDetail: function(ev) {
ev.preventDefault();
var id = this.model.get("_id");
app.router.navigate("#events/"+ id, {trigger : true})
}
});
/*
* List View
*/
App.Views.List = Backbone.View.extend({
template: "templates/list",
tagNam: "ul",
className: "tableList",
beforeRender: function() {
var events = this.model.get("userEvents").get("hosting");
events.each(function(model) {
this.insertView(new App.Views.Item({ model : model }));
}, this);
},
serialize: function() {
return {};
}
});
I think you might want to add a cleanup function on your Item view to undelegate the events when layoutmanager removes the view. I don't know if this will fix your problem, but it seems like good practise.
When you say after a reload, do you mean reloading the page with the browser reload button? if so, how do you get it to work in the first place?
It would help if you could provide a jsfiddle of your setup, or point us to a repo so we can test it on our machines. Make sure you include the router so that we can have a look at how the view and the layout that contains it are initialised.
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);
});
});