I was looking to this example Introduction to Backbone.js Part 2.
In this example the render function is called when I click on button:
events: {
"click button": "render"
},
How can I call the render function when the model is loaded?
var view = new View({ model: model });
You need just to add the following line this.render(); to your initialize function in your View Class
initialize: function()
{
this.template = $('#list-template').children();
this.render();
},
Related
I have a problem with backbone. I have two models: A and B
I need to listen to events in one model (for instance A), and then after the event has happened make changes in the view of model B and its view.
Does anyone have a fairly simple example how such functionality can be implemented in backbone?
var Model_A_View= Backbone.View.extend({
events: {
// some events;
"click" : "ok",
},
initialize: function () {
this.Model_A = new Model_A({ // });
}
var Model_B_View= Backbone.View.extend({
events: {
// some events;
},
initialize: function () {
this.Model_B = new Model_B({ // });
this.listenTo( model_A , "change: ok", this.dosomethingFunction());
}
dosomethingFunction: function () {
//dosomething
}
Your code hard to read, no code style, and some synax error.
However, you'd better create model outside of you view's initialize function, and pass the model as a para when new a view:
var modelA = new Model_A();
var viewA = new Model_A_View({
model: modelA
});
var modelB = new Model_B();
var viewB = new Model_B_View({
model: modelB
});
viewB.listenTo(modelA, "change:ok", viewB.dosomethingFunction);
As variant you can use The Backbone Events. Few simple steps, how you can do this.
1.Specify events global object:
window._vent = _.extend({}, Backbone.Events);
2.Specify event triggers in your view/model/collection. For example for your view:
var Model_A_View = Backbone.View.extend({
events: {
// some events;
"click" : "ok",
},
initialize: function() {
this.Model_A = new Model_A({});
},
ok: function() {
vent.trigger('model_A:update', this.model); //you can also send your model
}
});
3.Specify event listening in your Model_B:
var Model_B_View = Backbone.View.extend({
initialize: function() {
this.Model_B = new Model_B({});
vent.on('model_A:update', this.updateModel, this);
},
updateModel: function() {
//this function will be call after `model_A:update` event triggered
//do something with Model_B
}
});
I have the following Backbone View:
Chatbox.Views.Message = Backbone.View.extend({
template: _.template($("#tmplt-Message").html()),
events: {
"click a.remove_link" : "clear"
},
initialize: function () {
_.bindAll(this, 'render', 'remove');
this.model.on('clear', this.clear);
this.listenTo(this.model, 'destroy', this.remove);
},
render: function () {
return $(this.el).append(this.template(this.model.toJSON())) ;
},
clear: function() {
this.model.destroy();
}
});
When I click on the link with the class remove_link the clear() function is called properly and destroy() is executed.
How can I call the clear() externally, in my case I have a collection and I want to delete a model in this collection. Currently I'm trying doing this:
message = Chatbox.ChatLogCollection.where({ hash: hash});
message.clear();
Chatbox.ChatLogCollection.remove(message);
But I get:
TypeError: message.clear is not a function
How can I call clear() to remove the model from the view?
If your first line is searching for a model within the collection, clear() won't work because clear() is associated with the view, not the model, but you're calling it on the model. If it is the model, you can use collectionInstance.remove(message) or message.destroy() directly. However, you'd then need the view to listen for the model being removed to have the view re-rendered.
To check, add console.log(message) to see what you're getting.
I'm trying to execute my view's render method but for some reason it is telling me that Uncaught TypeError: Cannot call method 'listenTo' of undefined, not quite sure why.
var App = Backbone.View.extend({
current_election_index: 0,
el: 'body',
initialize: function() {
elections = new Elections();
_.bindAll(this, 'render');
this.listenTo(this, 'change', this.render);
elections.fetch();
/* elections.fetch({
success: function(test) {
console.warn(this.App.render());
this.render();
}*/
// });
},
render: function () {
console.log('this is the render method');
var view = new ElectionView({model: elections.at(0)})
}
})
What you want to do is listen to elections. So rather than listening to this.model or this,
this.listenTo(elections, 'reset', this.render);
The reset is triggered on a collection "when the collection's entire contents have been replaced". The change event is triggered on a model "when a model's attributes have changed". See the Backbone Catalogue of Events for more information.
If you want to update the view when each model belonging to the elections collection changes, be sure to do that in each ElectionView subview, not the App view.
I'm using BBB with the great LayoutManager for the views.
Unfortunately, i can't find a way to re-render specific subviews. Here is my setting:
Home.Views.Layout = Backbone.Layout.extend({
template: "home/home",
el: "#main",
views: {
"#left-menu-container": new Home.Views.Leftmenu(),
"#searchbox": new Home.Views.Searchbox(),
"#content": new Home.Views.Content()
}
});
Home.HomeView = new Home.Views.Layout();
Home.HomeView.render();
Home.Views.AddEditPatient = Backbone.View.extend({
template: "......",
events: {
'click .dosomething': 'dosomething'
},
dosomething: function(){
// [dosomething]
// Only Render Sub-View, e.g. #content here...
}
});
I don't want to re-render the whole layout, what would be possible by calling Home.HomeView.render() again, but how can i render only the sub-view in this setting?
I think you want to add to do something like this with backbone.layoutmanager
thisLayout.setView("#content", new View()).render();
The backbone.layoutmanager v0.6.6 documentation might be helpful
http://documentup.com/tbranyen/backbone.layoutmanager/#usage/nested-views
Also check
http://vimeo.com/32765088
If I understand your question correctly, you can do this in your dosomething function:
this.$("#divToRenderTo").html(new subView().render().$el);
Be sure to have "return this;" at the end of your sub-view's render function.
There are two ways I generally do this with layoutmanager:
Instantiate views in your initialize function and then drop them into the view in beforeRender. This gives your view access to the subview so you can render it directly.
initialize: function() {
this.subview = new SubView();
},
beforeRender: function() {
this.insertView(this.subview);
},
doSomething: function() {
this.subview.render();
}
You can use view.getView(#selector) to return the embedded view and then call render on that.
doSomething: function() {
this.getView('#content').render();
}
I have a web application using BackboneJS. In this application, I have a LayoutView.js file in which there is a Backbone View (called LayoutView). LayoutView has other functions (methods) that call other views. I am fetching some data in the initialize function of LayoutView, and I need to get this same data (model) in another view and work (update/delete) on it. Below is how I am passing data from LayoutView to myView:
var LayoutView = Backbone.View.extend({
el: $("#mi-body"),
initialize: function () {
var that = this;
this.ConfigData = new Configurations(); //Configurations is a collection
this.ConfigData.fetch({
success: function () {
alert("success");
},
error: function () {
alert("error");
}
});
this.render();
Session.on('change:auth', function (session) {
var self = that;
that.render();
});
},
render: function () {
// other code
},
events: {
'click #logout': 'logout',
'click #divheadernav .nav li a': 'highlightSelected'
},
myView: function () {
if (Session.get('auth')) {
this.$el.find('#mi-content').html('');
this.options.navigate('Myview');
return new MyLayout(this.ConfigData);
}
}
});
Still, I do not know how to "get"/access this data as my current data/model/collection (I am not sure which term is correct) in myView and work on it using Backbone's "model.save(), model.destroy()" methods. Also, whenever an edit/delete happens, the data of ConfigData should be modified and the update should reflect in the html displayed to the user.
Below is the code from MyView:
var MyView = Backbone.View.extend({
tagName: 'div',
id: "divConfigurationLayout",
initialize: function (attrs) {
this.render();
},
render: function () {
var that = this;
},
events: {
"click #Update": "update",
"click #delete": "delete"
},
update: function(){
//code for updating the data like model.save...
},
delete: function(){
//code for deleting the data like model.destroy...
}
});
Now the data I passed is in attrs in the initialize function. How to get this done..?
The syntax for instantiating a Backbone view is new View(options) where options is an Object with key-value pairs.
To pass a collection to your view, you'd instantiate it like so:
new MyLayout({
collection : this.configData
});
Within your view, this.collection would refer to your configData collection.